webentwicklung-frage-antwort-db.com.de

Festlegen des ausgewählten Attributs in einer Auswahlliste mit jQuery

Ich habe folgendes HTML:

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

Ich habe den String "B", also möchte ich das selected-Attribut darauf setzen, damit es so aussieht:

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

Wie mache ich das in jQuery?

jqueryhtmlhtml-select
49
Rupert

Wenn Sie nichts dagegen haben, Ihren HTML-Code ein wenig zu ändern, um das value-Attribut der Optionen hinzuzufügen, können Sie den dafür erforderlichen Code erheblich reduzieren:

<option>B</option>

zu

<option value="B">B</option>

Dies ist hilfreich, wenn Sie Folgendes tun möchten:

<option value="IL">Illinois</option>

Damit wird die folgende jQuery die Änderung vornehmen:

$("select option[value='B']").attr("selected","selected");

Wenn Sie sich für not entscheiden, um die Verwendung des value-Attributs einzuschließen, müssen Sie jede Option durchlaufen und den Wert manuell überprüfen:

$("select option").each(function(){
  if ($(this).text() == "B")
    $(this).attr("selected","selected");
});
119
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");
11
Darren Rose

Wenn Sie JQuery verwenden, müssen Sie seit Version 1.6 die Methode .prop () verwenden:

$('select option:nth(1)').prop("selected","selected");
5
G.Busato

Ich würde die Optionen durchlaufen, den Text mit dem vergleichen, was ich auswählen möchte, und dann das ausgewählte Attribut auf diese Option setzen. Wenn Sie die richtige gefunden haben, beenden Sie die Iteration (es sei denn, Sie haben eine Mehrfachauswahl).

 $('#dropdown').find('option').each( function() {
      var $this = $(this);
      if ($this.text() == 'B') {
         $this.attr('selected','selected');
         return false;
      }
 });
3
tvanfosson

Sie können der .selectedIndex-Strategie von danielrmt folgen, aber den Index basierend auf dem Text in den Option-Tags wie folgt bestimmen:

$('#dropdown')[0].selectedIndex = $('#dropdown option').toArray().map(jQuery.text).indexOf('B');

Dies funktioniert im ursprünglichen HTML-Code, ohne Wertattribute zu verwenden.

2
Derek Veit

Sie können reines DOM verwenden. Siehe http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

document.getElementById('dropdown').selectedIndex = 1;

aber jQuery kann helfen:

$('#dropdown').selectedIndex = 1;
1
danielrmt
$('#select_id option:eq(0)').prop('selected', 'selected');

das ist gut

1
Mikulasche

Dies kann eine Lösung sein

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

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");
1
Joe Chung

Etwas in der Richtung von ...

$('select option:nth(1)').attr("selected","selected");
0
David