web-dev-qa-db-de.com

Ausgewählte Option der Auswahlbox einstellen

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 funktioniert aber nicht. Irgendwelche Ideen?

jqueryhtmljquery-selectorshtml-select
306
Artjom Zabelin

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

$(function() {
    $("#gate").val('gateway_2');
});
444
Darin Dimitrov
$(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
});
142
Zkoh

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

35
Marty Hirsch

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

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

Wenn sich dieses Auswahlfeld (oder ein anderes Eingabeobjekt) in einem Formular befindet und im Formular eine Rücksetzschaltfläche verwendet wird, wird beim Klicken auf die Rücksetzschaltfläche 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 Textarea-Eingaben

<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);
15
Mike
  $("#form-field").val("5").trigger("change");
9
Mohd Bashir

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 mit derselben ID haben?

6
James Wiseman

Dies wäre eine weitere Option:

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

Ich hatte das gleiche Problem. 

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

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');
4
Posted

Ich weiß, dass es mehrere Iterationen von Antworten gibt, aber dies erfordert jetzt keine Abfrage oder eine andere externe Bibliothek und kann einfach mit den folgenden Schritten erreicht 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>
2
SyWill

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 die Auswahlbox über einen Ajax-Aufruf geladen habe. Sobald der Ajax-Aufruf ausgeführt wurde, hatte ich den Standardwert der Auswahlbox festgelegt

Die Lösung

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);
1
Korah

In einigen Fällen können 

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