使用选项执行一些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

要让选择元素控制第一个灯开关，您可以这样做：

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

在 select 的 onChange 属性中，this 将引用 select 元素本身。

编辑：要让相同的选择控制多个参数，您可以向选项元素添加一些data- 属性，以便根据需要为每个选项存储尽可能多的额外参数（在这种情况下，我认为您只需要一个额外的参数）。我会将逻辑移出 inline 属性：

<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 将是选择元素（从onChange 属性设置为this）。 “魔法”发生在这一行：

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

解释该行：sel.options[sel.selectedIndex] 获取对当前选定选项的引用，.getAttribute("data-switchNo") 获取该选项的 data- 属性。 + 将属性从字符串转换为数字。