基於選項值更改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是不突出td元件保持tdcolor類的背景顏色。

如果有人可以幫助我如何改變這個使用jquery，這將是偉大的。

很多預先感謝。

Answer 1

你應該爲了得到從下拉列表中selected文本中使用pseudo-class選擇。

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(){ 
    $('select').change(function() { 
    $(".tdcolor").css('background-color','green'); 
}); 
}); 

應該.tdcolor不ddcolor

事件應該是select

Answer 3

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