jquery - 使用 onclick.getElementById().style.color 更改颜色仅适用于 Firefox？

Question

我有一个表格，我想使用以下代码更改 TH 行的文本颜色：

<select>
  <option onclick="document.getElementById('tablehead').style.color=''">Default</option>
  <option onclick="document.getElementById('tablehead').style.color='red'">Red</option>
  <option onclick="document.getElementById('tablehead').style.color='yellow'">Yellow</option>
  <option onclick="document.getElementById('tablehead').style.color='green'">Green</option>
</select>

这在 Firefox 中应该可以完美运行，但是当我在任何其他浏览器中测试它时，它就无法正常工作。我在这里想念什么？

Answer 1

如果您使用的是 jQuery，您可以收听更改事件：

$('select').on('change', function() {
   $('#tablehead').css('color', this.value.toLowerCase());
});

Answer 2

您应该观看您的onChange事件select，这需要添加一个value到您的options. 您不能依赖用户通过单击选项来选择值，并且如您所见，并非所有浏览器都会触发单击事件。

伪代码：

<select onChange="if (this.options[this.selectedIndex].value == 1) { red } else if (this.options[this.selectedIndex].value == 2) { green }">

Answer 3

使用本机 javascript

<select onchange="document.getElementById('tablehead').style.color=this.value">
  <option value=''>Default</option>
  <option value='red'>Red</option>
  <option value='yellow'>Yellow</option>
  <option value='green'>Green</option>
</select>
<div id="tablehead">tablehead</div>

演示：小提琴