Der beste Weg, um die Auswahl einer <Auswahl> in jQuery aufzuheben?

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

Was ist der beste Weg, mit jQuery die Option elegant abzuwählen?

Verwenden Sie removeAttr ...

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

Oder Prop

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

Hier gibt es viele Antworten, aber leider sind alle ziemlich alt und verlassen sich daher auf attr/ removeAttrwas wirklich nicht der richtige Weg ist.

@coffeeyesplease erwähnt korrekt, dass eine gute browserübergreifende Lösung zu verwenden ist

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

Eine weitere gute browserübergreifende Lösung ist

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

Sie können es sehen , einen Selbsttest läuft hier . Getestet auf IE 7/8/9, FF 11, Chrome 19.

Es ist schon eine Weile her, seit ich gefragt wurde, und ich habe dies nicht mit älteren Browsern getestet, aber es scheint mir eine viel einfachere Antwort zu sein

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

.val () funktioniert auch für select http://api.jquery.com/val/

Einfachste Methode

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

Ich habe dies einfach für die Auswahl selbst verwendet und es hat den Trick gemacht.

Ich bin auf jQuery 1.7.1 .

Antworten funktionieren bisher nur für Mehrfachauswahl in IE6 / 7; Für die häufigere Nicht-Mehrfachauswahl müssen Sie Folgendes verwenden:

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

Dies wird in dem von flyfishr64 verlinkten Beitrag erklärt. Wenn Sie es sich ansehen, werden Sie sehen, wie es zwei Fälle gibt - Multi / Nicht-Multi. Nichts hindert Sie daran, beide nach einer vollständigen Lösung zu suchen:

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

Oh jquery.

Da es noch einen nativen Javascript-Ansatz gibt, muss ich einen bereitstellen.

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

Und nur um Ihnen zu zeigen, wie viel schneller dies ist: Benchmark

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

Dies würde jedes Element durchlaufen und nur diejenigen auswählen, die aktiviert sind

Ein kurzer Blick auf Google hat diesen Beitrag gefunden , in dem beschrieben wird, wie Sie für einzelne und mehrere Auswahllisten im IE das tun, was Sie möchten. Die Lösung scheint auch ziemlich elegant zu sein:

$('#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

Vielen Dank für die Lösung.

Die Lösung für die Single-Choice-Combo-Liste funktioniert einwandfrei. Ich habe dies gefunden, nachdem ich auf vielen Websites gesucht habe.

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

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

Ein anderer einfacher Weg:

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

Wenn ich ein Auswahlmenü verwende, ist normalerweise jeder Option ein Wert zugeordnet. Beispielsweise

<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

Dadurch wird das ausgewählte Attribut nicht aus der Option entfernt, aber alles, was ich wirklich möchte, ist der Wert.

Legen Sie eine ID in Ihrer Auswahl fest, wie:
<select id="foo" size="2">

Dann können Sie verwenden:
$("#foo").prop("selectedIndex", 0).change();