Geselecteerde optie van selectievak

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>

Antwoord 11

Mijn probleem

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

Ik had hetzelfde probleem. Het enige verschil met jouw code is dat ik de selectiebox aan het laden was via een ajax-aanroep en zodra de ajax-aanroep werd uitgevoerd, had ik de standaardwaarde van de selectiebox ingesteld

De oplossing

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

Antwoord 12

Ik weet dat dit een geaccepteerd antwoord heeft, maar bij het lezen van de antwoorden op het antwoord, zie ik enkele dingen die ik kan ophelderen die andere mensen kunnen helpen die problemen hebben met gebeurtenissen die niet worden geactiveerd na een waardewijziging.

Hiermee wordt de waarde in de vervolgkeuzelijst geselecteerd:

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

Als dit select-element JQueryUI of een andere JQuery-wrapper gebruikt, gebruik dan de vernieuwingsmethode van de wrapper om de gebruikersinterface bij te werken om aan te tonen dat de waarde is geselecteerd. Het onderstaande voorbeeld is voor JQueryUI, maar u zult de documentatie voor de wrapper die u gebruikt moeten bekijken om de juiste methode voor het vernieuwen te bepalen:

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

Als er een gebeurtenis is die moet worden geactiveerd, zoals een wijzigingsgebeurtenis, moet u die handmatig activeren, omdat het wijzigen van de waarde de gebeurtenis niet activeert. Het evenement dat je moet activeren, hangt af van hoe het evenement is gemaakt:

Als de gebeurtenis is gemaakt met JQuery, d.w.z. $(“#gate”).on(“change”,function(){}), activeer dan de gebeurtenis met de onderstaande methode:

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

Als de gebeurtenis is gemaakt met een standaard JavaScript-gebeurtenis, d.w.z. activeer de gebeurtenis dan met de onderstaande methode:

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

Antwoord 13

Ik had een probleem waarbij de waarde niet was ingesteld vanwege een syntaxisfout vóór de aanroep.

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

Controleer op syntaxisfouten vóór de oproep.

Antwoord 14

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

Antwoord 15

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

Antwoord 16

Toevoeging aan @icksde en @Korah (thx beide!)

Bij het bouwen van de optiesmet AJAXkan document.ready worden geactiveerd voordat de lijst is gemaakt, dus

Dit werkt niet

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

Dit doet het

Een time-out werkt wel, maar zoals @icksde zegt is het kwetsbaar (ik had eigenlijk 20 ms nodig in plaats van 10 ms). Het is beter om het als volgt in de AJAX-functie te plaatsen:

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