Stellen Sie die ausgewählte Option des Auswahlfelds ein

352

Ich möchte eine Option festlegen, die zuvor ausgewählt wurde, um beim Laden der Seite angezeigt zu werden. Ich habe es mit folgendem Code versucht:

$("#gate").val('Gateway 2');

mit

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

Das geht aber nicht. Irgendwelche Ideen?

Upvote
quelle
10
Eigentlich sollte es so funktionieren. Sind Sie sicher, dass Sie den Wert in document.ready () festlegen? Möglicherweise wird der Code ausgeführt, wenn die Auswahlbox noch nicht bereit ist.
Morph

Antworten:

495

Das sollte auf jeden Fall funktionieren. Hier ist eine Demo . Stellen Sie sicher, dass Sie Ihren Code in ein $(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});
Darin Dimitrov
quelle
4
ok, wenn ich die Liste fallen
lasse,
2
ahh ich habe es nicht in der document ready funktion erklärt ... danke!
Upvote
7
Nicht so gut wie das Setzen des Attributs "ausgewählt" auf "ausgewählt".
Adal
6
@Adal Warum ist dies nicht so gut wie das Setzen des Attributs 'ausgewählt' auf 'ausgewählt'?
Shawn
26
Nur für den Fall, dass sich jemand wundert, entspricht die 'Gateway 2'an die Funktion übergebene Funktion valdem Wert des valueAttributs der Auswahloption und nicht dem Text. In dieser JSFiddle , einer sehr mild bearbeiteten Version von Darins Demo, finden Sie ein Beispiel dafür, was ich meine.
Kenny Evitt
166
$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});
Zkoh
quelle
37

$('#gate').val('Gateway 2').prop('selected', true);

Marty Hirsch
quelle
2
Sehr ähnlich, $('#your-select-box-id :nth-child(2)').prop('selected', true)was funktioniert, mit visueller Aktualisierung der Dropbox.
Big Rich
Nur einer, der für mich funktioniert hat. Verdächtig, weil ich eine benutzerdefinierte Auswahlbibliothek verwende.
Louis M.
15

Ich habe festgestellt, dass die Verwendung der Methode jQuery .val () einen erheblichen Nachteil hat.

<select id="gate"></select>
$("#gate").val("Gateway 2");

Befindet sich dieses Auswahlfeld (oder ein anderes Eingabeobjekt) in einem Formular und wird im Formular eine Schaltfläche zum Zurücksetzen verwendet. Wenn Sie auf die Schaltfläche zum Zurücksetzen klicken, wird der eingestellte Wert gelöscht und nicht wie erwartet auf den Anfangswert zurückgesetzt.

Das scheint für mich am besten zu funktionieren.

Für Auswahlfelder

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);

Für Texteingaben

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")

Für Textbereichseingaben

<textarea id="gate"></textarea>
$("#gate").html("your desired value")

Für Kontrollkästchen

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);

Für Optionsfelder

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);
Mike
quelle
12
  $("#form-field").val("5").trigger("change");
Mohd Bashir
quelle
1
Es wäre schön gewesen, wenn Sie einige Informationen dazu hinzugefügt hätten. Dies ist ein großartiges Beispiel dafür, wie Sie dies tun sollten, wenn Sie Code haben, der auf Änderungen an der Auswahl achtet.
Sean.boyer
6

Das funktioniert gut. Siehe diese Geige: http://jsfiddle.net/kveAL/

Ist es möglich, dass Sie Ihre jQuery in einem $(document).ready()Handler deklarieren müssen ?

Könnten Sie auch zwei Elemente haben, die dieselbe ID haben?

James Wiseman
quelle
6

Dies wäre eine weitere Option:

$('.id_100 option[value=val2]').prop('selected', true);
Kent Aguilar
quelle
6

Ich hatte das gleiche Problem.

Lösung: Fügen Sie eine Aktualisierung hinzu.

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');
Gesendet
quelle
3
Dies ist nur für jqueryui selectmenu, nicht Standard-HTML
stuartdotnet
3

Ich weiß, dass es mehrere Iterationen von Antworten gibt, aber jetzt erfordert dies keine Abfrage oder eine andere externe Bibliothek und kann mit den folgenden Schritten ganz einfach durchgeführt werden.

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);
<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>

SyWill
quelle
tolle Lösung. aber es sieht so aus, als würde es das ausgewählte Attribut nicht aus den zuvor ausgewählten Optionen entfernen
Systems Rebooter
3

Einige Fälle können sein

$('#gate option[value='+data.Gateway2+']').attr('selected', true);
Hemil
quelle
1

Mein Problem

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

Ich hatte das gleiche Problem. Der einzige Unterschied zu Ihrem Code besteht darin, dass ich das Auswahlfeld über einen Ajax-Aufruf geladen habe und sobald der Ajax-Aufruf ausgeführt wurde, den Standardwert des Auswahlfelds festgelegt habe

Die Lösung

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);
Korah
quelle
1
Sie haben das Problem richtig analysiert, aber die Lösung ist schlecht und fragil. Sie müssen eine Rückruffunktion verwenden, die an Ihren Ajax-Anruf angehängt ist
icksde
-1

Ich hatte ein Problem, bei dem der Wert aufgrund eines Syntaxfehlers vor dem Aufruf nicht festgelegt wurde.

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

Überprüfen Sie vor dem Aufruf, ob Syntaxfehler vorliegen.

Howard
quelle
4
So nützlich es auch ist, daran erinnert zu werden, nach Syntaxfehlern zu suchen, dies ist keine Antwort.
Schrotflinte Ninja
-1
$(function() {
$("#demo").val('hello');
});
Gaurav Rai
quelle
-2
// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});
Ronnel Castillo Ocampo
quelle
1
Dies wird sogar über den ausgewählten Wert hinaus
wiederholt
Plus .attr()war der falsche Weg, dies zu tun, lange bevor diese Antwort veröffentlicht wurde.
Auspex
-2

Ergänzung zu @icksde und @Korah (danke beide!)

Beim Erstellen der Optionen mit AJAX kann das document.ready ausgelöst werden, bevor die Liste erstellt wird

Das funktioniert nicht

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

Das macht

Ein Timeout funktioniert, aber wie @icksde sagt, ist es zerbrechlich (ich brauchte tatsächlich 20 ms anstelle von 10 ms). Es ist besser, es wie folgt in die AJAX-Funktion einzubauen:

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});
Cor Koomen
quelle