Stellen Sie die ausgewählte Option des Auswahlfelds ein

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?

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');
});

$(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
});

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

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);

  $("#form-field").val("5").trigger("change");

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?

Dies wäre eine weitere Option:

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

Ich hatte das gleiche Problem.

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

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

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>

Einige Fälle können sein

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

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);

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.

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

// 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');
});

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");
});