¿La mejor manera de deseleccionar un en jQuery?

 Input your option Input your option  

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

Use removeAttr …

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

O prop

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

Aquí hay muchas respuestas, pero lamentablemente 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 una buena solución entre navegadores es usar

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

Otra buena solución entre navegadores es

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

Puede verlo ejecutar una autocomprobación aquí . Probado en IE 7/8/9, FF 11, Chrome 19.

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

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

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

Las respuestas hasta ahora solo funcionan para múltiples selecciones en IE6 / 7; para la opción no múltiple más común, debe usar:

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

Esto se explica en la publicación vinculada por flyfishr64. Si lo miras, verás cómo hay 2 casos: multi / no múltiple. No hay nada que te impida cambiar ambos para una solución completa:

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

El método más simple

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

Simplemente utilicé esto en la selección en sí y funcionó.

Estoy en jQuery 1.7.1 .

Google rápido encontró esta publicación que describe cómo hacer lo que desea para listas de selección individuales y múltiples en IE. La solución parece bastante elegante también:

 $('#clickme').click(function() { $('#selectmenu option').attr('selected', false); }); 
 $("#selectID option:selected").each(function(){ $(this).removeAttr("selected"); }); 

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

Oh jquery.

Dado que todavía hay 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: punto de referencia

 $(option).removeAttr('selected') //replace 'option' with selected option's selector 
 $("option:selected").attr("selected", false); 

Muchas gracias por la solución.

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

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

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

  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 bien, esto no elimina el atributo seleccionado de la opción, pero todo lo que realmente quiero es el valor.

Otra forma simple:

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