html - Execute some Javascript onChange using options? -

html - Execute some Javascript onChange using options? -

i've been lurking bit , couldn't find answer. have bunch of buttons want turn drop downwards menu , have code executed onchange. but, i'm new javascript , having hard time figuring out how work. got work, couldn't work more 1 option. here's have:

<button class="lightbutton" onclick="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);"> lights on</button> <button class="lightbutton" onclick="lightswitch(1,false);lightswitch(2,false);lightswitch(3,false);"> lights off</button>

i got lights turn on doing this:

<form name="functions"> <select name="jumpmenu" onchange="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);"> <option>lightfunctions</option> <option value="*";>light 1 on</option> <option value="*";>light 1 off</option> </select> </form>

now, see why works -- it's telling whenever changes turn on lights. how alter "onchange" create gets whichever alternative have chosen?

i think i'm missing js unsure.

i appreciate help.

to have select element command first lightswitch can this:

<select name="jumpmenu" onchange="lightswitch(1,this.value==='on');"> <option value="on";>light 1 on</option> <option value="off";>light 1 off</option> </select>

that is, instead of hardcoding true sec parameter lightswitch() test current value of select element. (note i've changed value attributes more meaningful. look this.value==='on' evaluate either true or false.)

within select's onchange attribute this refer select element itself.

edit: have same select command multiple parameters can add together data- attributes alternative elements store many parameters per alternative needed (in case think need 1 extra). , i'd move logic out of inline attribute:

<select name="jumpmenu" onchange="jumpchange(this);"> <option value="">lightfunctions</option> <option data-switchno="1" value="on";>light 1 on</option> <option data-switchno="1" value="off";>light 1 off</option> <option data-switchno="2" value="on";>light 2 on</option> <option data-switchno="2" value="off";>light 2 off</option> <option data-switchno="3" value="on";>light 3 on</option> <option data-switchno="3" value="off";>light 3 off</option> </select> function jumpchange(sel) { if (sel.value === "") return; // nil if user selected first alternative var whichlight = +sel.options[sel.selectedindex].getattribute("data-switchno"); lightswitch(whichlight, sel.value==='on'); sel.value = ""; // reset select display "light functions" alternative }

demo: http://jsfiddle.net/n7b8j/2/

within jumpchange(sel) function added parameter sel select element (set this onchange attribute). "magic" happens on line:

var whichlight = +sel.options[sel.selectedindex].getattribute("data-switchno");

to explain line: sel.options[sel.selectedindex] gets reference selected option, , .getattribute("data-switchno") gets option's data- attribute. + converts attribute string number.

javascript html jsp option onchange