Selector selected
El selector :selected selecciona elementos
que están seleccionados, es decir, aquellos que tienen el atributo
selected.
El selector :selected funciona para elementos con la etiqueta
option. No
funciona con casillas de verificación
(checkbox) o
botones de opción
(radio),
para ellos use el selector
checked.
Dado que :selected no pertenece a la especificación CSS,
para mejorar el rendimiento en los navegadores
modernos es mejor filtrar primero los elementos
utilizando un selector CSS puro, y luego
aplicar .filter(':selected').
Sintaxis
Así seleccionamos elementos con
el atributo selected:
$(':selected');
Ejemplo
Vamos, cada vez que se seleccione un elemento en la lista
desplegable, mostrarlo debajo de la lista en color
verde. Como puede ver, antes de su primer clic
se mostrarán los elementos seleccionados por defecto,
estos son 'bbb' y 'ddd':
<select name="texts" multiple="multiple">
<option>aaa</option>
<option selected="selected">bbb</option>
<option>ccc</option>
<option selected="selected">ddd</option>
<option>eee</option>
<option>fff</option>
</select>
<div></div>
div {
color: green;
}
$('select')
.change(function() {
let str = '';
$('select option:selected').each(function() {
str += $(this).text() + ' ';
});
$('div').text(str);
}).trigger('change');
