オプション値に基づいてtd背景色を変更します

Question

ドロップダウンで選択した色の値に基づいて背景色を変更したいと思います。

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

にする必要がありますがddcolorべきではありません。あなたの答えのための

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

イベントがあなたのドロップダウンからselectedテキストを取得するためにpseudo-classセレクタを使用する必要があります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>