Obtener el valor del elemento seleccionado en el evento usando JavaScript puro

Question

¡Quiero obtener el valor de un elemento seleccionado cuando se hace clic en el elemento seleccionado! Quiero hacerlo sin un atributo onchange en el HTML.

Me gustaría lograr esto sin jQuery. No quiero incluir un marco jQuery en este sitio web cuando este pequeño script es lo único que necesito.

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); 
} 

El select_element.value; contiene una secuencia vacía. ¿Cómo debería hacer esto?

Answer 1

Una solución que funcione con todos los navegadores (incluyendo 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); 
};​ 

¿Hace lo anterior el trabajo?

Editar:

Editado para reflejar sus selectos de id etc.

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); 
}​ 

ver su funcionamiento en: http://jsfiddle.net/gRoberts/4WUsG/

Answer 3

.onchange = function() { ... } parece sobrescribir otras h andlers, por lo que utilizan addEventListener("change", function() { ... })