¿La mejor manera de deseleccionar un <select> en jQuery?

<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?

Utilice removeAttr ...

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

O apoyo

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

Hay un montón de respuestas aquí, pero por desgracia todos ellos son bastante antiguos y por lo tanto se basan en attr/ removeAttrque en realidad no es el camino a seguir.

@coffeeyesplease menciona correctamente que una buena solución para varios navegadores es usar

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

Otra buena solución de navegador cruzado es

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

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

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

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

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

Método más simple

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

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

Estoy en jQuery 1.7.1 .

Las respuestas hasta ahora solo funcionan para selecciones múltiples en IE6 / 7; para la selecció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: múltiple / no múltiple. No hay nada que lo detenga buscando ambas para una solución completa:

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

Oh jquery

Como todavía 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: punto de referencia

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

Esto iteraría por cada elemento y deseleccionaría solo los que están marcados

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

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

}); 

$("#select_id option:selected").prop("selected", false);

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

Muchas gracias por la solución.

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

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

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

Otra forma simple:

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

Por lo general, 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.

Establezca una identificación en su selección, como:
<select id="foo" size="2">

Entonces puedes usar:
$("#foo").prop("selectedIndex", 0).change();