当选择了选项时，无法弄清楚如何更改选择框的颜色

Question

我有这样的HTML：

<select onclick="colorchanger()">
  <option name="white" value="0">--Select--</option>
  <option name="red" value="1">Work</option>
  <option name="green" value="2">Doesn't Work</option>
</select>

选择选项时，我需要更改选择框的颜色。 我知道如何通过使用值来更改颜色，但是我需要使用名称。 有人可以帮忙吗？ 如何为此功能编写JavaScript？

Answer 1

请尝试以下操作：

 function colorchanger(op){ var color = op.options[op.selectedIndex].getAttribute('name'); op.style.backgroundColor=color; } 

 <select onclick="colorchanger(this)"> <option name="white" value="0">--Select--</option> <option name="red" value="1">Work</option> <option name="green" value="2">Doesn't Work</option> </select> 

Answer 2

使用“ onchange”处理程序。 不必每次单击都更改颜色。

 function colorChanger(select) { var color = select.options[select.selectedIndex].getAttribute('name'); select.style.backgroundColor=color; }; 

 <select onchange="colorChanger(this);"> <option name="white" value="0">--Select--</option> <option name="red" value="1">Work</option> <option name="green" value="2">Doesn't Work</option> </select>