<!DOCTYPE html>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.MRG{ background-color:#82E0AA; }
.MRA{ background-color:#F5B041; }
.MRR{ background-color:#EC7063; }
</style>
</header>
<body>
<table class="table table-hover table-condensed" border="1px">
<thead>
<tr>
<td>Made Ready</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<select>
<option class="MRR">Red</option>
<option class="MRA">Amber</option>
<option class="MRG">Green</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>我有一个 HTML 表格，在 HTML 表格单元格中填充了一个下拉列表。
下拉列表有三个选项（红色、琥珀色和绿色）。
我希望 HTML 单元格的背景颜色根据下拉列表值进行更改。
例如。如果下拉列表值为绿色，则 HTML 表格单元格背景颜色将 = 绿色。
如何通过使用 JavaScript 或 CSS 来实现这一点？
非常感谢！
这是您要找的吗？
document.querySelector('select').onchange=changeEventHandler;
var indicator = document.getElementById("color-indicator");
function changeEventHandler(event) {
indicator.classList = this.value;
}.MRG{ background-color:#82E0AA; }
.MRA{ background-color:#F5B041; }
.MRR{ background-color:#EC7063; }<table class="table table-hover table-condensed" border="1px">
<thead>
<tr>
<td>Made Ready</td>
</tr>
</thead>
<tbody>
<tr>
<td id="color-indicator">
<select>
<option value="MRR">Red</option>
<option value="MRA">Amber</option>
<option value="MRG">Green</option>
</select>
</td>
</tr>
</tbody>
</table>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句