How do you select a particular option in a SELECT element in jQuery?

759

votes

If you know the Index, Value or Text. also if you don't have an ID for a direct reference.

This, this and this are all helpful answers.

Example markup

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

jquery

$("#my_select").val("the_new_value").change(); ... ... from so - dsdsdsdsd

1282

votes

A selector to get the middle option-element by value is

$('.selDiv option[value="SEL1"]')

For an index:

$('.selDiv option:eq(1)')

For a known text:

$('.selDiv option:contains("Selection 1")')

EDIT: As commented above the OP might have been after changing the selected item of the dropdown. In version 1.6 and higher the prop() method is recommended:

$('.selDiv option:eq(1)').prop('selected', true)

In older versions:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2: after Ryan's comment. A match on "Selection 10" might be unwanted. I found no selector to match the full text, but a filter works:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3: Use caution with $(e).text() as it can contain a newline making the comparison fail. This happens when the options are implicitly closed (no </option> tag):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

If you simply use e.text any extra whitespace like the trailing newline will be removed, making the comparison more robust.

146

votes

None of the methods above provided the solution I needed so I figured I would provide what worked for me.

$('#element option[value="no"]').attr("selected", "selected");

94

votes

You can just use val() method:

$('select').val('the_value');

67

votes

By value, what worked for me with jQuery 1.7 was the below code, try this:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

21

votes

There are a number of ways to do this, but the cleanest approach has been lost among the top answers and loads of arguments over val(). Also some methods changed as of jQuery 1.6, so this needs an update.

For the following examples I will assume the variable $select is a jQuery object pointing at the desired <select> tag, e.g. via the following:

var $select = $('.selDiv .opts');

Note 1 - use val() for value matches:

For value matching, using val() is far simpler than using an attribute selector: https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

The setter version of .val() is implemented on select tags by setting the selected property of a matching option with the same value, so works just fine on all modern browsers.

Note 2 - use prop('selected', true):

If you want to set the selected state of an option directly, you can use prop (not attr) with a boolean parameter (rather than the text value selected):

e.g. https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

Note 3 - allow for unknown values:

If you use val() to select an <option>, but the val is not matched (might happen depending on the source of the values), then "nothing" is selected and $select.val() will return null.

So, for the example shown, and for the sake of robustness, you could use something like this https://jsfiddle.net/1250Ldqn/:

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

Note 4 - exact text match:

If you want to match by exact text, you can use a filter with function. e.g. https://jsfiddle.net/yz7tu49b/2/:

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

although if you may have extra whitespace you may want to add a trim to the check as in

    return $.trim(this.text) == "some value to match";

Note 5 - match by index

If you want to match by index just index the children of the select e.g. https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

Although I tend to avoid direct DOM properties in favour of jQuery nowadays, to future-proof code, so that could also be done as https://jsfiddle.net/yz7tu49b/5/:

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

Note 6 - use change() to fire the new selection

In all the above cases, the change event does not fire. This is by design so that you do not wind up with recursive change events.

To generate the change event, if required, just add a call to .change() to the jQuery select object. e.g. the very first simplest example becomes https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

There are also plenty of other ways to find the elements using attribute selectors, like [value="SEL2"], but you have to remember attribute selectors are relatively slow compared to all these other options.

14

votes

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

13

votes

You could name the select and use this:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

It should select the option you want.

13

votes

Exactly it will work try this below methods

For normal select option

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

For select 2 option trigger option need to use

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>

12

votes

Using jquery-2.1.4, I found the following answer to work for me:

$('#MySelectionBox').val(123).change();

If you have a string value try the following:

$('#MySelectionBox').val("extra thing").change();

Other examples did not work for me so that's why I'm adding this answer.

I found the original answer at: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

10

votes

For setting select value with triggering selected:

$('select.opts').val('SEL1').change();

For setting option from a scope:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

This code use selector to find out the select object with condition, then change the selected attribute by attr().

Futher, I recommend to add change() event after setting attribute to selected, by doing this the code will close to changing select by user.

9

votes

Answering my own question for documentation. I'm sure there are other ways to accomplish this, but this works and this code is tested.

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

7

votes

I use this, when i know the index of the list.

$("#yourlist :nth(1)").prop("selected","selected").change();

This allows the list to change, and fire the change event. The ":nth(n)" is counting from index 0

7

votes

Try this

you just use select field id instead of #id (ie.#select_name)

instead of option value use your select option value

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

5

votes

i'll go with:-

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

4

votes

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

3

votes

For Jquery chosen if you send the attribute to function and need to update-select option

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

2

votes

The $('select').val('the_value'); looks the right solution and if you have data table rows then:

$row.find('#component').val('All');

2

votes

if you want to not use jQuery, you can use below code:

document.getElementById("mySelect").selectedIndex = "2";

2

votes

Thanks for the question. Hope this piece of code will work for you.

var val = $("select.opts:visible option:selected ").val();

1

votes

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

or

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

1

votes

There are a few suggestions why you should use prop instead of attr. Definitely use prop as I've tested both and attr will give you weird results except for the simplest of cases.

I wanted a solution where selecting from an arbitrarily grouped select options automatically selected another select input on that same page. So for instance, if you have 2 dropdowns - one for countries, and the other for continents. In this scenario, selecting any country automatically selected that country's continent on the other continent dropdown.

$("#country").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent correctly with prop
  $('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);
});



$("#country2").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent wrongly with attr
  $('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <form>
    <h4 class="text-success">Props to the good stuff ;) </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country" id="country">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
  <hr>

  <form>
    <h4 class="text-danger"> Attributing the bad stuff to attr </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country-2" id="country2">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent2">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
</div>

As seen in the code snippet, prop works correctly every time, but attr fails to select properly once the option has been selected once.

Keypoint: We're usually interested in the property of the attribute, so its safer to use prop over attr in most situations.

How do you select a particular option in a SELECT element in jQuery?

21 Answers

Note 1 - use val() for value matches:

Note 2 - use prop('selected', true):

Note 3 - allow for unknown values:

Note 4 - exact text match:

Note 5 - match by index

Note 6 - use change() to fire the new selection

Exactly it will work try this below methods

Try this