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

Question

我想什么时候＆＃34;停在这里＆＃34;点击它外部区域应该是红色，当＆＃34;取消＆＃34;点击它应该是绿色但它显示内部颜色红色和绿色。是否有任何方法可以将背景颜色更改为红色和绿色。代码在这里

<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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要在select节点上使用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>