0

我一直在潜伏，找不到答案。基本上我有一堆按钮，我想把它们变成一个下拉菜单并执行代码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 但不确定。

我很感激帮助。

4

1 回答 1

2

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

<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()测试选择元素的当前值。（请注意，我已将 value 属性更改为更有意义的内容。表达式this.value==='on'将评估为trueor 或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将是选择元素（this从onChange属性中设置）。“魔法”发生在这一行：

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

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

于 2013-02-09T22:42:55.687 回答