JavaScript Forum

**seannarae** · 07-14-2009, 03:13 PM

I have a JS in the HEAD which swaps CSS to show/hide elements by their ID. This works without issue when the event is an ONCLICK applied to elements such as links, or buttons or the like:

Code:

onclick="swapClass('wrap1','divoff','wrap2','divon')"

However, i'm struggling with how to apply the event to a specific option-value in a select-list. I understand this needs to be done by calling the function via ONCHANGE on the SELECT element.

Code:

<select name="list" onchange="swapClass('wrap1','divoff','wrap2','divon')"

This works, in that ANY and ALL options in the select-list will fire the JS.

But how then to restrict the event to a specific OPTION in that list? For example, the 5th element (index #6)

Some things i tied that SEEMED promising but dont work:

Code:

<select name="list" onchange="swapClass('wrap1','divoff','wrap2','divon'[this.selectedIndex+6])"

Code:

<select name="list" onchange="swapClass('wrap1','divoff','wrap2','divon').this.selectedIndex+6"

As with most of my JS struggles, it seems to boil down to a matter of syntax & formatting.

**chrishirst** · 07-14-2009, 03:31 PM

Your function will need to check what option index has been selected to fire the event.

return this.options[this.selectedIndex].value in the function and check it's value

**seannarae** · 07-14-2009, 07:10 PM

I understand what you're suggesting: to have the function itself mapped to & triggered by that one specific option value.

But thing is: the function is triggered from other elements on the page; not just that option value.

For example, i'm hiding the container by default when the page loads:

Code:

<body onload="swapClass('wrap2','divoff')">

That specific option value triggers the show of the container that got hidden onLoad. Which may be totally possible given your suggestion. Again, its a syntax issue where i am stumped.

I'd been using dummy names for the function in previous posts, so here is a more accurate copy/paste of what i am using in my HEAD & BODY (with only minimal scrubbing to protect client code):

HEAD

Code:

<script type="text/javascript">
<!--
function P7_MultiClass2() { //v1.0 by PVII
 var args=P7_MultiClass2.arguments;if(document.getElementById){
  for(var i=0;i<args.length;i+=2){if(document.getElementById(args[i])!=null){
  if(document.p7setdown){for(var k=0;k<p7dco.length-1;k+=2){
  if(args[i]==p7dco[k]){args[i+1]=p7dco[k+1];break;}}}
  document.getElementById(args[i]).className=args[i+1];}}}
}
//-->
</script>

SELECT-LIST IN BODY

Code:

<select name="list" onchange="P7_MultiClass2('wrap1','divoff','wrap2','divon')">
     <option value="0" selected="selected">Select...</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
     <option value="4">Four</option>
     <option value="5">Five</option>
     <option value="6">Other</option>
</select>

Any assistance is greatly appreciated on how to format the modification to the function to fire it (again) when option value #6 (other) is selected.

thanks....

**seannarae** · 07-15-2009, 02:29 PM

SOLVED
Cant believe it worked, but after (literally) 12 straight hours of crash course teach-myself-javascript, i wrote my first from-scratch function + conditional statements.

The main MultiClass function (from Project Seven) need not have been changed. I just needed a new function that fired it. This new function is what i placed on the SELECT ONCHANGE.

The new function ("fireMultiClass") is where i am stating which option value is to trigger the main MultiClass function

Code:

function fireMultiClass () {
    var inReason = document.getElementById('inactivationReason');
        if (inReason.value == '113') {P7_MultiClass2('wrap1','divoff','wrap2','divon')}
        else {P7_MultiClass2('wrap1','divon','wrap2','divoff')}
}