根据下拉选择为单元分配颜色

Question

我正在尝试根据HTML中的下拉选择来更改单元格颜色，如果那是唯一的方法，我可以使用javascript，但我觉得我只是在CSS中缺少一些简单的东西。

带有表/下拉列表的HTML块：

<table class="tg">
<tbody>
<tr>
<td class="select">
<select> 
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select> </td>
<td class="select2">
<select> 
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select> </td>
</tr>
</tbody>
</table>

CSS：

.select option value{font-family:Arial, sans-serif;font-size:14px;}
.select option value .1{background-color:blue}
.select option value .2{background-color:red}
.select option value .3{background-color:yellow}
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}

上面的内容对我不管用什么形状或形式都不起作用，我可以使用background-color =“ blue”等将颜色直接放入每个值中，但是它只会更改下拉列表的颜色，而不是单元格的颜色，并且在选择后不会保留颜色。

Answer 1

您只能使用JS执行此操作，而无法使用CSS动态更改颜色。

这是一个例子：

 $('select').change(function(){ var v = $(this).find(':selected').data('color'); $(this).parent().css('background-color',v); }) 

 .tg { border-collapse: collapse; border-spacing: 0; } .tg td { padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; } option[value="1"] { background-color: blue; } option[value="2"] { background-color: red; } option[value="3"] { background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="tg"> <tbody> <tr> <td class="select"> <select> <option value="1" data-color="blue">Option 1</option> <option value="2" data-color="red">Option 2</option> <option value="3" data-color="orange">Option 3</option> </select> </td> <td class="select2"> <select> <option value="1" data-color="blue">Option 1</option> <option value="2" data-color="red">Option 2</option> <option value="3" data-color="orange">Option 3</option> </select> </td> </tr> </tbody> </table>