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

【问题标题】：Change class of html element when specific option/value is selected in select field在选择字段中选择特定选项/值时更改 html 元素的类
【发布时间】：2017-05-30 10:18:19
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript drop-down-menu onchange

【解决方案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在分配listener之前已经加载到document中.

Here's the updated fiddle

【讨论】：

【解决方案2】：

你可以用这样的事件监听器实现同样的事情

<select id="my-select">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
</select>

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

<script>
var selectElem = document.getElementById('my-select');
selectElem.addEventListener('change', function(event){
    // Then call your method
    wow(event.target.value);
});

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

【讨论】：