valor - ¿La mejor manera de deseleccionar un<seleccionar> en jQuery?

quitar seleccion checkbox jquery

Question

<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>

¿Cuál es la mejor manera, usando jQuery, para deseleccionar elegantemente la opción?

Answer 1

Método más simple

$(''select'').val('''')

Simplemente utilicé esto en el selecto mismo e hizo el truco.

Estoy en jQuery 1.7.1 .

Answer 2

Generalmente cuando uso un menú de selección, cada opción tiene un valor asociado. Por ejemplo

<select id="nfl">
  <option value="Bears Still...">Chicago Bears</option>
  <option selected="selected" value="Go Pack">Green Bay Packers</option>
</select>
console.log($(''#nfl'').val()) logs "Go Pack" to the console
Set the value to an empty string $(''#nfl'').val("")
console.log($(''#nfl'').val()) logs "" to the console

Ahora esto no elimina el atributo seleccionado de la opción pero todo lo que realmente quiero es el valor.

Answer 3

Ha pasado un tiempo desde que lo pregunté, y no lo he probado en navegadores antiguos, pero me parece que la respuesta es mucho más simple.

$("#selectID").val([]);

.val () también funciona para seleccionar http://api.jquery.com/val/

Answer 4

Hasta ahora las respuestas solo funcionan para selecciones múltiples en IE6 / 7; para la selección no múltiple más común, necesita usar:

$("#selectID").attr(''selectedIndex'', ''-1'');

Esto se explica en el post vinculado por flyfishr64. Si lo mira, verá cómo hay 2 casos: multi / non-multi. No hay nada que le impida cambiar ambos para obtener una solución completa:

$("#selectID").attr(''selectedIndex'', ''-1'').find("option:selected").removeAttr("selected");

Answer 5

Hay muchas respuestas aquí, pero desafortunadamente todas son bastante antiguas y, por lo tanto, confían en attr / removeAttr que realmente no es el camino a seguir.

@coffeeyesplease menciona correctamente que se debe utilizar una buena solución para varios navegadores

$("select").val([]);

Otra buena solución para varios navegadores es

// Note the use of .prop instead of .attr
$("select option").prop("selected", false);

Puedes verlo ejecutando una autoprueba here . Probado en IE 7/8/9, FF 11, Chrome 19.

Answer 6

Muchas gracias por la solución.

La solución para la lista combinada de una sola opción funciona perfectamente. Encontré esto después de buscar en muchos sitios.

$("#selectID").attr(''selectedIndex'', ''-1'').children("option:selected").removeAttr("selected");

Answer 7

Oh jquery

Dado que aún existe un enfoque de JavaScript nativo, siento la necesidad de proporcionar uno.

var select = document.querySelector(''select''); //hopefully you''ll use a better selector query
select.selectedIndex = 0; // or -1, 0 sets it to first option, -1 selects no options

Y solo para mostrarle cuánto más rápido es esto: benchmark

Answer 8

Otra forma sencilla:

$("#selectedID")[0].selectedIndex = -1

Answer 9

Una búsqueda rápida en Google encontró esta publicación que describe cómo hacer lo que quiere para las listas de selección única y múltiple en IE. La solución parece bastante elegante también:

$(''#clickme'').click(function() {
        $(''#selectmenu option'').attr(''selected'', false);

}); 

Answer 10

Utilice removeAttr ...

$("option:selected").removeAttr("selected");

O Prop

$("option:selected").prop("selected", false)

Answer 11

$(option).removeAttr(''selected'') //replace ''option'' with selected option''s selector

Answer 12

$("#selectID option:selected").each(function(){
  $(this).removeAttr("selected");
});

Esto iteraría a través de cada elemento y deseleccionará solo los que están marcados

Answer 13

$("option:selected").attr("selected", false);