Ausgewählte Option der Selectbox einstellen

Question

Ich möchte festlegen, dass eine Option, die zuvor ausgewählt wurde, beim Laden der Seite angezeigt wird. Ich habe es mit dem folgenden 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>

Aber das funktioniert nicht. Irgendwelche Ideen?

Answer 1

Ich weiß, dass dies eine akzeptierte Antwort hat, aber beim Lesen der Antworten auf die Antwort sehe ich einige Dinge, die ich klären kann, die anderen Leuten helfen könnten, die Probleme mit Ereignissen haben, die nach einer Wertänderung nicht ausgelöst werden.

Dadurch wird der Wert in der Dropdown-Liste ausgewählt:

$("#gate").val("gateway_2")

Wenn dieses Auswahlelement JQueryUI oder einen anderen JQuery-Wrapper verwendet, verwenden Sie die Refresh-Methode des Wrappers, um die Benutzeroberfläche zu aktualisieren und anzuzeigen, dass der Wert ausgewählt wurde. Das folgende Beispiel ist für JQueryUI, aber Sie müssen in der Dokumentation des von Ihnen verwendeten Wrappers nachsehen, um die richtige Methode für die Aktualisierung zu ermitteln:

$("#gate").selectmenu("refresh");

Wenn es ein Ereignis gibt, das ausgelöst werden muss, z. B. ein Änderungsereignis, müssen Sie dieses manuell auslösen, da die Änderung des Wertes das Ereignis nicht auslöst. Welches Ereignis Sie auslösen müssen, hängt davon ab, wie das Ereignis erstellt wurde:

Wenn das Ereignis mit JQuery erstellt wurde, d.h. $("#gate").on("change",function(){}), dann lösen Sie das Ereignis mit der folgenden Methode aus:

$("#gate").change();

Wenn das Ereignis mit einem Standard-JavaScript-Ereignis erstellt wurde, d. h. wenn das Ereignis mit der folgenden Methode ausgelöst wird:

var JSElem = $("#gate")[0];
if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    JSElem.dispatchEvent(evt);
} else {
    JSElem.fireEvent("onchange");
}

Answer 2

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 ist, dass ich das Auswahlfeld über einen Ajax-Aufruf lud und sobald der Ajax-Aufruf ausgeführt wurde, hatte ich den Standardwert des Auswahlfeldes festgelegt

Die Lösung

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

Answer 3

$(document).ready(function() {
  $('#selectBoxId option[value="val2"]').prop('selected', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectBoxId">
  <option value="val1">Option1</option>
  <option value="val2">Option2</option>
  <option value="val3">Option3</option>
</select>

Answer 4

$(function() {
$("#demo").val('hello');
});

Answer 5

Ich hatte ein Problem, bei dem der Wert aufgrund eines Syntaxfehlers vor dem Aufruf nicht gesetzt 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.

Prüfen Sie vor dem Aufruf auf Syntaxfehler.