当特定 option/value 在 select 字段中被 select 编辑时，更改 html 元素的 class

Question

我想检查特定 option/value 是否在 select 字段中被 select 编辑，然后根据 [=] 自动更改另一个元素的 class 27=]ed option/value.

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

我 created/forked 这里有一个工作示例 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
    })
})

Edit：将 change 事件侦听器包装在 DOMContentLoaded 事件处理程序中，以确保 someSelectElement 已加载到document 在分配 listener 之前。

Here's the updated fiddle

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

当特定 option/value 在 select 字段中被 select 编辑时，更改 html 元素的 class

Change class of html element when specific option/value is selected in select field

javascript

onchange

drop-down-menu