Il modo migliore per deselezionare un <select> in jQuery?

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

Qual è il modo migliore, usando jQuery, per deselezionare elegantemente l'opzione?

Usa removeAttr ...

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

O Prop

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

Ci sono molte risposte qui, ma sfortunatamente tutte sono piuttosto vecchie e quindi fanno affidamento su attr/ removeAttrche non è davvero la strada da percorrere.

@coffeeyesplease menziona correttamente che deve essere utilizzata una buona soluzione cross-browser

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

Un'altra buona soluzione cross-browser è

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

Puoi vederlo eseguire un test automatico qui . Testato su IE 7/8/9, FF 11, Chrome 19.

È da un po 'che non lo chiedo, e non l'ho ancora testato su browser più vecchi, ma mi sembra che una risposta molto più semplice sia

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

.val () funziona anche con select http://api.jquery.com/val/

Metodo più semplice

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

Ho semplicemente usato questo sulla selezione stessa e ha fatto il trucco.

Sono su jQuery 1.7.1 .

Le risposte funzionano finora solo per selezioni multiple in IE6 / 7; per la selezione multipla più comune, è necessario utilizzare:

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

Questo è spiegato nel post collegato da flyfishr64. Se lo guardi, vedrai come ci sono 2 casi: multi / non-multi. Non c'è niente che ti impedisce di cantare entrambi per una soluzione completa:

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

Oh jquery.

Poiché esiste ancora un approccio javascript nativo, sento la necessità di fornirne 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

E solo per mostrarti quanto è più veloce: benchmark

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

Ciò provocherebbe l'iterazione di ogni elemento e deselezionerebbe solo quelli selezionati

Un rapido google ha trovato questo post che descrive come fare ciò che desideri sia per gli elenchi a selezione singola che per quelli multipli in IE. Anche la soluzione sembra piuttosto 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

Grazie mille per la soluzione.

La soluzione per l'elenco combinato a scelta singola funziona perfettamente. L'ho trovato dopo aver cercato su molti siti.

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

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

Un altro modo semplice:

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

Di solito quando uso un menu di selezione, ogni opzione ha un valore associato. Per esempio

<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

Ora questo non rimuove l'attributo selezionato dall'opzione ma tutto ciò che voglio davvero è il valore.

Imposta un ID nella tua selezione, come:
<select id="foo" size="2">

Quindi puoi usare:
$("#foo").prop("selectedIndex", 0).change();