elemento de selección múltiple - onchange

Question

Tengo un elemento seleccionado que permite múltiples selecciones. Me gustaría mostrar los valores seleccionados en otra parte de la página (en un div o algo así) a medida que el usuario realiza cambios a lo que está seleccionado.

¿Es la única forma de hacerlo repetir las "opciones" y verificar si "seleccionado" es verdadero? esto no sería preferible ya que cada evento de "cambio" requeriría que se iterara todo el elemento de selección.

Aquí es un violín que muestra cómo actualmente estoy haciendo, pero estoy esperando que tal vez hay una manera mejor que tener que iterar sobre todas las opciones en cada "cambio": multiple select elment onchange fiddle

Answer 1

Comprobar jsFiddle Link

.val() en un múltiplo vuelve seleccione una matriz.

Answer 2

Si usted podría utilizar jQuery puede ser que sea tan fácil como:

$('select').change(function() {alert($(this).val())}) 

Answer 3

En su lugar, puede usar el :selected Selector of jQuery, pero creo que bajo el capó, jQuery hace un bucle en el seleccionado = verdadero.

Answer 4

Puede utilizar borrosidad en lugar de cambio, de modo que la selección solo se procese una vez, en lugar de en cada selección. http://jsfiddle.net/2mSUS/3/

Answer 5

En su violín, acabo de utilizar .val(). Esto devuelve una matriz

JSFiddle Link

$(function() { 
    $('#fruits').change(function() { 
     console.log($(this).val()); 
    }); 
}); 

Answer 6

Esto funciona:

var MyControl = document.getElementById('Control_ID'); 
var newValue = MyControl[MyControl.selectedIndex].value; 

Por supuesto, Control_ID es el ID del control de selección.

Answer 7

element.addEventListener('click', function(){alert(this.value)}) 

Esta es una solución en JS, puede transferirla a jQuery con bastante facilidad. La idea es agregar un oyente de clic a cada opción en la selección. Esto no funcionará en IE8 y abajo debido a addEventListener, sin embargo, hay formas de evitar esto.

Creo que este es un mejor enfoque que tener que reiterar sobre la lista. Sin embargo, tendrá que tener un oyente conectado a cada opción.

Answer 8

Estoy haciendo un formulario de envío. Mi ayudante de plantilla es el siguiente:

'submit #update': function(event) { 
    event.preventDefault(); 
    var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection 
    var array_opts = Object.values(obj_opts); //convert to array 
    var stray = array_opts.map((o)=> o.text); //to filter by: text, value or selected 
    //stray is now ["Test", "Milk Free"] for example, depending on the selection 
    //...do stuff... 
} 

Se puede usar un patrón similar para 'onchange'