选择特定选项时更改背景颜色

Question

我想当“停在这里”单击时，其外部区域应为红色，而当“取消”单击时，其区域应为绿色，但其内部颜色应为红色和绿色。 有什么方法可以将背景色更改为红色和绿色。 代码在这里

<tbody>
  <tr>
       <td bgcolor="green" align="center" ><select name="place1"  >
       <option onclick="this.parentNode.style.backgroundColor='red' "> Park Here</option>
       <option onclick="this.parentNode.style.backgroundColor='green' "> Cancel </option>
       </select></td>

  </tr>
  </tbody>

这是输出，但我希望外部颜色应为红色或绿色，就像此标记所做的一样。 有什么办法吗？ 请告诉我，我希望外部颜色在单击时应为红色，而不是内部

Answer 1

将您的颜色应用于选项的值。然后将其与javascript一起应用

 function changing(that){ var colors = document.getElementById('select').value; that.parentNode.style.backgroundColor =colors } 

 <tbody> <tr> <td bgcolor="green" align="center" ><select id="select" name="place1" onchange="changing(this)"> <option value=""> select</option> <option value="red"> Park Here</option> <option value="green"> Cancel </option> </select></td> </tr> </tbody> 

Answer 2

您需要在选择节点上使用onchange事件。 选项不会响应onclick事件。

提供您的选择ID，以便您可以通过函数内的document.getElementById（“ yourId”）进行选择。

<script>
  setColor = function(val) {
     var e = document.getElementById("mySelect");
     document.body.style.backgroundColor = e.options[e.selectedIndex].value;
  }
</script>

<select id="mySelect" onchange="setColor()">
    <option value"red">Red</option>
    <option value="green">Green </option>
</select>

Answer 3

该代码对我有效。 我的问题解决了谢谢+ Rajesh Jangid

<select id="select" onchange="this.parentNode.style.backgroundColor = this.value">
  <option value='red'>Park here</option>
  <option value='green'>Cancel</option>
</select>