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?
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");
});
<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");
Wenn Sie JQuery verwenden, müssen Sie seit Version 1.6 die Methode .prop () verwenden:
$('select option:nth(1)').prop("selected","selected");
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;
}
});
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.
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;
$('#select_id option:eq(0)').prop('selected', 'selected');
das ist gut
$(document).on('change', 'select', function () {
var value = $(this).val();
$(this).find('option[value="' + value + '"]').attr("selected", "selected");
})
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");
Etwas in der Richtung von ...
$('select option:nth(1)').attr("selected","selected");