javascript - 在选择字段中选择特定选项/值时更改 html 元素的类

Question

我想检查是否在选择字段中选择了特定选项/值，然后根据所选选项/值自动更改另一个元素的类。

<select onchange="wow(this.value)">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
</select>

<div id="x" class="hide">x</div>

<script>
function wow(value) {
switch (value) {
    case "c":
        document.getElementById("x").setAttribute("class", "show");
        break;
    default:
        document.getElementById("x").setAttribute("class", "hide");
        break;
}
}
</script>

我在这里创建/ fork 了一个工作示例 http://jsfiddle.net/CVxP7/112/但我不想直接在 select 标签中调用 onchange 事件。

这可以通过使用 EventListener 或其他触发器来完成吗？我必须使用纯 JavaScript 或 mootools。

Answer 1

您的select元素:

<select id="someSelectElement"></select>

在你的 JavaScript 中:

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById("someSelectElement").addEventListener('change', function(e) {
        //your event handling code here
    })
})

编辑:将 change 事件监听器包装在 DOMContentLoaded 事件处理程序中，以确保 someSelectElement 具有在将监听器分配给它之前已将其加载到文档中。

Here's the updated fiddle