Einstellen der selected-Attribut auf eine ausgewählte Liste mit jQuery

Ich habe Folgendes HTML:

<select id="dropdown">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

Habe ich den string "B", so will ich, um die selected - Attribut auf, so wird es sein:

<select id="dropdown">
    <option>A</option>
    <option selected="selected">B</option>
    <option>C</option>
</select>

Wie würde ich das in jQuery?

InformationsquelleAutor Rupert | 2009-08-21

122

Wenn Sie nichts dagegen haben, ändern Sie Ihre HTML ein wenig zu gehören, die value - Attribut der Optionen, Sie können erheblich reduzieren den code, der erforderlich ist, dies zu tun:
```
<option>B</option>
```
zu
```
<option value="B">B</option>
```
Diese wird hilfreich sein, wenn Sie wollen, etwas zu tun:
```
<option value="IL">Illinois</option>
```
Mit, dass die Folgen jQuery die änderung vornehmen:
```
$("select option[value='B']").attr("selected","selected");
```
Wenn Sie sich entscheiden nicht auf die Nutzung der value Attribut, Sie werden benötigt, um die einzelnen Optionen Durchlaufen und prüfen Sie manuell, ob Ihr Wert:
```
$("select option").each(function(){
  if ($(this).text() == "B")
    $(this).attr("selected","selected");
});
```
- Nach dem hinzufügen der value Attribute, die Auswahl können Sie ebenfalls wie folgt vorgenommen: $("#dropdown").val("B");
- +1 - dies ist genau das, was ich suchte. auch, +1 @Jörn
- Hi @Jonathan Sampson: Schöne Lösung. Alle anderen Dinge empfehlen die Einstellung .val (), aber das schien einfach nicht für mich arbeiten.
- Einstellung .val() NICHT nennen .change() Ereignis gebunden, um Ihre <select>. Einfach nur sagen...
- wie wird man wählen Sie in der dropdown-id? $("select option") << dies ist generische
- Wenn Sie möchten, um das Feuer der .change() Ereignis gebunden, um Ihre wählen Sie Sie verwenden können $(this).change()
- Warum nicht verwenden .prop() ???
- hat nicht Hinzugefügt werden, bis 2011. Diese Antwort, die älter als ein paar Jahre. Zusätzlich, obwohl nicht meine Absicht, durch änderung des Attributs, das Sie aktivieren können, mehr Kontrolle über styling per Attribut-Selektoren.
- .val() und .prop() nicht ändern/setzen des Attributs. Aber dieses Verhalten ist in einigen Fällen erforderlich und erfolgt nur mit .attr() jsfiddle.net/6sebLnrz
- Und wie kann ich Sie entfernen den alten selected - Attribut ?
- Sehen removeAttr.
InformationsquelleAutor Sampson

<select id="cars">
<option value='volvo'>volvo</option>
<option value='bmw'>bmw</option>
<option value='fiat'>fiat</option>
</select>

var make = "fiat";

$("#cars option[value='" + make + "']").attr("selected","selected");

InformationsquelleAutor Darren Rose

7

Wenn Sie mit JQuery, da die 1.6 haben Sie zu benutzen .prop() Methode :
```
$('select option:nth(1)').prop("selected","selected");
```
- Diese Lösung ist am besten. .attr() nicht die Möglichkeit, mehrere änderungen. .prop() tut.
InformationsquelleAutor G.Busato
3

Ich würde Durchlaufen Sie die Optionen, vergleicht man den text zu dem, was ich gewählt werden, dann stellen Sie das selected-Attribut auf diese option. Sobald Sie die richtige ist, beenden Sie die iteration (es sei denn, Sie haben eine multiselect).
```
 $('#dropdown').find('option').each( function() {
      var $this = $(this);
      if ($this.text() == 'B') {
         $this.attr('selected','selected');
         return false;
      }
 });
```
- Gibt es einen Grund zu verwenden .finden() statt $('#dropdown-option")? Effizienter? Die "var $this" Zeug sieht auch für mich falsch ...
- Ich denke, der Unterschied ist vor allem stilistisch. Unter der Haube würde ich erwarten, dass Sie funktionieren grundsätzlich auf die gleiche Weise. Holen Sie sich eine Sammlung, filtern. Ich habe angefangen mit $dies als einen Weg, um einen Verweis auf die jQuery-Objekt. Ich habe auch gesehen, selbst (oder $selbst), aber ich denke, das ist weniger klar.
InformationsquelleAutor tvanfosson
2

Können Sie die .selectedIndex-Strategie danielrmt, aber bestimmen Sie den index auf der Grundlage der text innerhalb des option-tags wie diese:
```
$('#dropdown')[0].selectedIndex = $('#dropdown option').toArray().map(jQuery.text).indexOf('B');
```
Dies funktioniert auf der original HTML-Code ohne die Verwendung von value-Attribute.

InformationsquelleAutor Derek Veit

Dies kann eine Lösung

$(document).on('change', 'select', function () {
            var value = $(this).val();
            $(this).find('option[value="' + value + '"]').attr("selected", "selected");
        })

InformationsquelleAutor Regan

1

Können Sie Reine DOM. Sehen http://www.w3schools.com/htmldom/prop_select_selectedindex.asp
```
document.getElementById('dropdown').selectedIndex = 1;
```
aber jQuery kann helfen:
```
$('#dropdown').selectedIndex = 1;
```
- Dies setzt Voraus, dass Sie wissen, welches element den gewünschten Wert ein. Das ist nicht immer der Fall, wenn die Liste dynamisch generiert wird.
InformationsquelleAutor

Code:

var select = function(dropdown, selectedValue) {
    var options = $(dropdown).find("option");
    var matches = $.grep(options,
        function(n) { return $(n).text() == selectedValue; });
    $(matches).attr("selected", "selected");
};

Beispiel:

select("#dropdown", "B");

InformationsquelleAutor Joe Chung

$('#select_id option:eq(0)').prop('selected', 'selected');

seine gute

InformationsquelleAutor Mikulasche

0

Etwas entlang der Linien von...
```
$('select option:nth(1)').attr("selected","selected"); 
```
InformationsquelleAutor David

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.