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()的第二个参数来测试select元素的当前值。（请注意，我已将值属性更改为更有意义的内容。表达式this.value==='on'将评估为true或false。）

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

编辑：要使用相同的选择控制多个参数，您可以向选项元素添加一些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将是select元素（从this属性设置为onChange）。 “神奇”发生在这一行：

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

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

使用选项执行一些Javascript onChange？

1 个答案: