特定のオプション/値が選択フィールドで選択されたときに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> 

は/ここで働い例http://jsfiddle.net/CVxP7/112/をフォークが、私はselectタグに直接のonchangeイベントをコールする必要はありません。

これは、EventListenerまたは別のトリガーを使用して行うことができますか？ 私はプレーンなjavascriptまたはmootoolsを使用する必要があります。

Answer 1

あなたselect要素：あなたのJavaScriptで

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

：

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

編集：someSelectElementがにロードされていることを確実にするようにDOMContentLoadedイベントハンドラ内changeイベントリスナーをラップ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> 

のようなイベントリスナーで同じことを達成することができます