Set selected option of select box

Question

I want to set a option that was selected previously to be displayed on page load. I tried it with the following code:

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

with

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

But this does not work. Any ideas?

Branks

Actually that is how it should work, are you sure you set the value in document.ready() ? Maybe the code is executed when the selectbox isn't ready yet. – Handful

Answer 1

This definitely should work. Here's a demo. Make sure you have placed your code into a $(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});

Dialogue

ok, when I drop down the list it is highlighted but not displayed as first element in the list – Branks

@ArtWorkAD, what do you mean by first element in the list? I don't quite understand your requirement. – Dialogue

ahh I declared it not in the document ready function...thanks! – Branks

Not as good as setting the attribute "selected" to "selected". – Ozonize

@Ozonize Why is this not as good as setting the 'selected' attribute to 'selected'? – Gerlachovka

Hey Shawn, depending on your situation, setting the selected attribute can be a more explicit way of doing things. However I've come across cases where some java-script was triggered on value change and not "selected" attribute so I guess you should take my comment with a grain of salt. – Ozonize

Just in case anyone else wonders, the 'Gateway 2' passed to the function val matches the value of the value attribute of the select option, not its text. See this JSFiddle, which is a very mildly edited version of Darin's demo, for an example of what I mean. – Brundage

Sometimes its common to want to select the first item (for initialisation routine). In which case you can avoid having to hardcode a value, and just use $("#gate").val($("#gate option:first").val()); – Deth

I have a problem selecting a value in select2. can you help me over this? – Marauding

@Ozonize I came across the event not being fired, too. So, for example if you need to trigger an onChange event, just append .change(). – Masterly

Using jQuery Mobile don't forget to update the UI so your selection displays. $('#select').selectmenu().selectmenu('refresh'); – Prevalent

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

Hereinto

Answer 3

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

Agone

Very similar to $('#your-select-box-id :nth-child(2)').prop('selected', true) which works, with visual update of the drop-box. – Hearsay

Only one that worked for me. Suspect because I am using a custom select library. – Figural

Answer 4

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

Calculable

It would have been nice if you included some info around this. This is a great example of how you SHOULD do this, IF you have code that is watching for changes to the select. – Ruddy

Thank you very much this is exactly what i was looking for. This is the perfect answer if you are updating the values of select box with ajax. – Joelynn

Needed to add .trigger("change"); for mine to work. Thanks. – Poltergeist

Answer 5

I have found using the jQuery .val() method to have a significant drawback.

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

If this select box (or any other input object) is in a form and there is a reset button used in the form, when the reset button is clicked the set value will get cleared and not reset to the beginning value as you would expect.

This seems to work the best for me.

For Select boxes

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

For text inputs

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

For textarea inputs

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

For checkbox boxes

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

For radio buttons

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);

Oracle

Answer 6

This would be another option:

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

Lulualaba

Answer 7

That works fine. See this fiddle: http://jsfiddle.net/kveAL/

It is possible that you need to declare your jQuery in a $(document).ready() handler?

Also, might you have two elements that have the same ID?

Leyla

Answer 8

I had the same problem.

Solution: add a refresh.

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

Hamer

this is only for jqueryui selectmenu, not standard html – Oxus

Answer 9

Some cases may be

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

Ballata

Answer 10

I know there are several iterations of answers but now this doesn't require jquery or any other external library and can be accomplished pretty easy just with the following.

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>

Fulmis

great solution. but looks like it doesn't remove selected attribute from previously selected options – Decimalize

Answer 11

I know this has an accepted answer, but in reading the replies on the answer, I see some things that I can clear up that might help other people having issues with events not triggering after a value change.

This will select the value in the drop-down:

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

If this select element is using JQueryUI or other JQuery wrapper, use the refresh method of the wrapper to update the UI to show that the value has been selected. The below example is for JQueryUI, but you will have to look at the documentation for the wrapper you are using to determine the correct method for the refresh:

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

If there is an event that needs to be triggered such as a change event, you will have to trigger that manually as changing the value does not fire the event. The event you need to fire depends on how the event was created:

If the event was created with JQuery i.e. $("#gate").on("change",function(){}) then trigger the event using the below method:

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

If the event was created using a standard JavaScript event i.e. then trigger the event using the below method:

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

Rizika

Answer 12

My problem

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

I had the same issue . The Only difference from your code is that I was loading the select box through an ajax call and soon as the ajax call was executed I had set the default value of the select box

The Solution

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

Kavanaugh

you analyzed the problem correct, but the solution is bad and fragile. you have to use a callback function attached to your ajax call – Meter

Answer 13

$(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>

Heptameter

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Cence

Answer 14

I had a problem where the value was not set because of a syntax error before the call.

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

Check for syntax errors before the call.

Komatik

As useful as it is to be reminded to check for syntax errors, this isn't an answer. – Jessalin

Answer 15

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

Polypropylene

Answer 16

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

Winterwinterbottom

This will loop even past the selected value, which is inefficient – Maturity

Plus .attr() has been the wrong way to do this since well before this answer was posted. – Runge

Answer 17

Addition to @icksde and @Korah (thx both!)

When building the options with AJAX the document.ready may be triggered before the list is built, so this may give some insight.

A timeout does work but as @icksde says it's fragile. It's better to fit it inside the AJAX function like this:

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

Agnesse