根據選項值更改td背景色

Question

我想根據下拉菜單中選擇的顏色值更改td背景色。

HTML：

<table border="1">
<tr>
<th>Channel</th>
<th>Health</th>
</tr>
<tr>
<td>Mobile</td>
<td class="tdcolor">
  <select >
    <option value="0">Select</option>
    <option value="1">Green</option>
    <option value="2">Red</option>
    <option value="3">Amber</option>
  </select>
</td>
</tr>
</table>

jQuery的：

$(document).ready(function(){
  $('td.tdcolor').change( function() {
     $(this).css('background-color','green');
 });
});

上面的jquery沒有突出顯示持有tdcolor類的td元素的背景色。

如果有人可以幫助我如何使用jquery更改此設置，那就太好了。

提前謝謝了。

Answer 1

您應該使用pseudo-class選擇器，以便從下拉列表中獲取selected文本。

var text = $(this).find(':selected').text();

 $(document).ready(function(){ $('td.tdcolor').change( function() { $(this).css('background-color',$(this).find(':selected').text()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tr> <th>Channel</th> <th>Health</th> </tr> <tr> <td>Mobile</td> <td class="tdcolor"> <select > <option value="0">Select</option> <option value="1">Green</option> <option value="2">Red</option> <option value="3">Blue</option> </select> </td> </tr> </table> 

Answer 2

 $(document).ready(function() { $('#color').change(function() {//add an id to html and use as selector $(this).parent("td").css('background-color', $('option:selected', this).text());//use the text of selected option as parameter }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tr> <th>Channel</th> <th>Health</th> </tr> <tr> <td>Mobile</td> <td class="tdcolor"> <select id='color'> <option value="0">Select</option> <option value="1">Green</option> <option value="2">Red</option> <option value="3">Amber</option> </select> </td> </tr> </table> 

Answer 3

$(document).ready(function(){
  $('select').change( function() {
     $(".tdcolor").css('background-color','green');
 });
});

應該是.tdcolor而不是ddcolor

該事件應處於select