Klasse des HTML-Elements ändern, wenn eine bestimmte Option/Wert im Auswahlfeld ausgewählt ist

Question

Ich möchte prüfen, ob eine bestimmte Option/Wert in einem Auswahlfeld ausgewählt ist und dann automatisch die Klasse eines anderen Elements entsprechend der ausgewählten Option/Wert ändern .

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

ich angelegt habe/gegabelt ein funktionierendes Beispiel hier http://jsfiddle.net/CVxP7/112/ aber ich will nicht das onchange Ereignis in der select-Tag direkt aufzurufen.

Könnte dies mit einem EventListener oder einem anderen Trigger geschehen? Ich muss plain Javascript oder mootools verwenden.

Answer 1

Ihr select Element:

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

In Ihrem javascript:

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

bearbeiten: Wrapped die change Ereignis-Listener innerhalb des Handlers DOMContentLoaded Ereignis, um zu gewährleisten, dass someSelectElement in geladen wurde die document vor dem Zuweisen der listener zu ihm.

Here's the updated fiddle

Answer 2

Sie das Gleiche mit einem Ereignis-Listener wie diese

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

erreichen können