Ottieni il valore dell'elemento select sull'evento utilizzando puro JavaScript

Question

Voglio ottenere il valore di un elemento select quando si fa clic sull'elemento select! Voglio farlo senza un attributo onchange nel codice HTML.

Mi piacerebbe ottenere questo senza jQuery. Non voglio includere un framework jQuery in questo sito Web quando questo piccolo script è l'unica cosa di cui ho bisogno.

var select_element = document.getElementById('product-form-user-enquiry-type'); 

select_element.onchange = function(e){ 
    if (!e) 
     var e = window.event; 
    var svalue = select_element.value; 
    alert(svalue); 
} 
if (select_element.captureEvents){ 
    select_element.captureEvents(Event.CHANGE); 
} 

Il select_element.value; contiene una stringa vuota. Come dovrei farlo?

Answer 1

Una soluzione che funziona con tutti i browser (tra cui IE8):

var select_element = document.getElementById('product-form-user-enquiry-type'); 

select_element.onchange = function() { 
    var elem = (typeof this.selectedIndex === "undefined" ? window.event.srcElement : this); 
    var value = elem.value || elem.options[elem.selectedIndex].value; 
    alert(value); 
}​ 

Answer 2

​document.getElementById('test').onchange = function() { 
    alert(this.options[this.selectedIndex].val​​​ue); 
};​ 

Quanto sopra funziona?

Edit:

cura per riflettere la vostra selezionare id ecc

var select_element = document.getElementById('product-form-user-enquiry-type'); 

select_element.onchange = function(e){ 
    if (!e) 
     var e = window.event; 
    var svalue = this.options[this.selectedIndex].value; 
    alert(svalue); 
}​ 

vederlo lavorare a: http://jsfiddle.net/gRoberts/4WUsG/

Answer 3

.onchange = function() { ... } sembra sovrascrivere altro andlers, per cui uso addEventListener("change", function() { ... })