Выполните некоторые Javascript onChange, используя параметры?

Question

Я немного скрывался и не мог найти ответ. В основном у меня есть куча кнопок, которые я хочу превратить в раскрывающееся меню и выполнить код onChange. Но я новичок в javascript, и мне сложно понять, как это будет работать. Я несколько получил его на работу, но я не мог заставить его работать с более чем одним вариантом. Вот что у меня есть:

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

я получил свет включить, делая это:

<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> 

Теперь я понимаю, почему это работает - это просто говорит это, что всякий раз, когда она меняется, чтобы включить все огни. Но как мне изменить «onChange», чтобы он стал таким, каким он был выбран?

Я думаю, что мне не хватает JS, но не уверен.

Я ценю помощь.

Answer 1

Для того, что выберите элемент управление только первый Lightswitch вы можете сделать это:

<select name="jumpmenu" onChange="lightswitch(1,this.value==='on');"> 
<option value="on";>Light 1 On</option> 
<option value="off";>Light 1 Off</option> 
</select> 

То есть, вместо того, чтобы жестко прописывать true в качестве второго параметра lightswitch() теста текущего значения выбора элемента. (Обратите внимание, что я изменил значение атрибутов на что-то более значимое. Выражение this.value==='on' будет оценивать либо true или false.)

в пределах выберите атрибут onChange-х this будет относиться к самому выбора элемента.

EDIT: для того, чтобы один и тот же элемент управления выбрать несколько параметров, вы можете добавить атрибуты data- к элементам опций для хранения как можно большего количества дополнительных параметров для каждого параметра (в этом случае, думаю, вам потребуется только один дополнительный). И я бы переместить логику из атрибута инлайн:

<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; // do nothing if user selected first option 

    var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo"); 
    lightswitch(whichLight, sel.value==='on'); 

    sel.value = ""; // reset select to display the "Light Functions" option 
} 

Демо: http://jsfiddle.net/N7b8j/2/

В функции jumpChange(sel), что я добавил параметр sel станет выберите элемент (устанавливается в качестве this из атрибута onChange). «Магия» происходит на этой линии:

var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo"); 

Чтобы объяснить эту строку: sel.options[sel.selectedIndex] получает ссылку на выбранную опцию, и .getAttribute("data-switchNo") получает атрибут этого опциона data-. + преобразует атрибут из строки в число.