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

Question

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>

`$("#my_select").val("the_new_value").change();` ... ... from [so](http://stackoverflow.com/questions/4672505/why-does-the-jquery-change-event-not-trigger-when-i-set-the-value-of-a-select-us) — dsdsdsdsd, Sep 26 '14 at 09:05

score 1378 · Accepted Answer · edited May 12 '19 at 04:29

1378

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.

edited May 12 '19 at 04:29

Nante

39
5

answered May 20 '11 at 06:38

Grastveit

15,770
3
27
36

8

:contains is not great as it will match pieces of text; problematic if any of your option text is a substring of another option text. – Ryan Nov 03 '14 at 21:56
33

This is works too **$('#id option[value="0"]').attr('selected', 'selected');** – ASalameh Mar 12 '15 at 18:40
@Grastveit how to change the color of first option if it is selected or not when it has a class say myClass. Thanks – Zaker May 05 '15 at 12:38
@User I don't understand. Maybe post it in a new question? Or is it $('.selDiv .myClass').css('color', 'red')? – Grastveit May 06 '15 at 07:19
6

I'd like to add you should DEFINITELY use prop and not attr. I almost went nuts trying to debug an application and changing from attr to prop fixed it. – user609926 Mar 15 '16 at 17:12
Yup. .attr() is deprecated. You should now use .prep() instead. Actually, you should have done so for quite a while. – j4k3 Jul 05 '16 at 12:23
I hope you don't mind asking - what does OP means? - 'as commented above the OP might have been ...' – FrenkyB Feb 09 '17 at 06:34
@FrenkyB: the Original Poster what wrote the question. – Grastveit Feb 09 '17 at 11:19
1

Now that :eq(#) is deprecated (https://api.jquery.com/category/deprecated/deprecated-3.4/), the :eq(#) choice should be avoided. It still works for now, but supposedly will break with jQuery 4.0. – Michael M. May 12 '22 at 18:01
This working in my case: $('#my-select option:eq(0)').prop('selected', true); – MdFarzan Jul 07 '22 at 12:32

score 158 · Answer 2 · edited Dec 01 '11 at 02:25

158

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

edited Dec 01 '11 at 02:25

Andrew Whitaker

124,656
32
289
307

answered Dec 01 '11 at 01:05

user1074546

1,597
1
9
2

14

Note as of jQuery 1.6 this should use `prop` and not `attr`. – iCollect.it Ltd Sep 06 '16 at 09:27
@GoneCoding Using `.attr` is correct. "selected" is an attribute of the – Carlos Llongo Jul 25 '17 at 08:45
4

@CarlosLlongo: That is irrelevant. The jQuery recommendation is to always use `prop` in preference to `attr`. That saves having to look up each and every property on w3.org in order to see if it is only an attribute, or implemented with backing actions. – iCollect.it Ltd Aug 03 '17 at 16:04
Use `$('#element option[value="no"]').prop('selected', true);` or if you want to select by the option text instead of the value: `$('#element option:contains(Selection 1)').prop('selected', true);` – Avatar May 10 '23 at 12:12

score 108 · Answer 3 · answered Dec 02 '09 at 19:49

108

You can just use val() method:

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

answered Dec 02 '09 at 19:49

Leandro Ardissone

3,009
6
32
31

24

This is wrong because you are SETTING the value of ALL the SELECT elements to `the_value`. .val is not selector/filter function! It is a property accessor and passing it that string SETS the value. I tried to take my upvote back but was too late after I reallized this in testing. – AaronLS May 26 '11 at 21:14
4

Hot have you got 10 votes as useful answer? The val() is a getter and a setter. If you just use val(), you'll get the value. If you pass something like val('the_value') you're setting it to 'the_value' – Gui May 27 '11 at 11:00
12

Please @AaronLS and @guilhermeGeek, refer to the [docs](http://api.jquery.com/val/) (last example). It works as a selector for select, checkboxes and radio buttons, and as a value setter for text inputs and textareas. – Leandro Ardissone May 27 '11 at 15:46
9

You have misread the documentation. For checkboxes, radios, and listboxes the command sets the "selected" attribute for those items. The last example shows how passing val("checkbox 1") causes it to become selected. This is not the same as a "selector" in terms of getting the objects via CSS/jquery selector. I tested your code, it doesn't work bottom line. – AaronLS May 31 '11 at 14:11
30

+1: no, it's not a JQuery selector, however I think most people searching for this question are like me, and simply want to change the currently selected option; coming up with an actual selector is merely a way to do that. And this is certainly better than answers that I've seen that have you iterate over all of the options. – kdgregory Aug 04 '12 at 13:44
I also used this..though I needed to pass id selector.But this answer helped a lot. so +1 :-) – webcoder Aug 14 '13 at 10:55
2

+1. Used this answer as it saved me the hassle of `con+ca+to+nation` and as our value is linked to a JavaScript object, using `.val(object.property)` and `object.property = .val()` was much simpler. So far we have no bugs with this and it seems to be working fine. Serialization is also working fine using this approach and `name=value` is serialized correctly so far. (Off course `$('select')` needs to be replaced with your own selector!) – Nope Dec 03 '13 at 14:28
1

the question is HOW TO SELECT an option not how to set – Ahmad Hajjar Jun 17 '14 at 14:15
3

value is the selected option – Luke Jul 07 '14 at 03:06
1

+1: Right, this is the easiest way to set the selected option of a select. Why else would anyone use a jQuery selector to find and an option element in the DOM? Ok, suppose I know why, but cases when selecting an option element is needed are extremely rare. The majority of the other answers just changes the 'selected' attribute of an option after found it, using a jQuery selector, and that's only doing something simple in a very complicated way. So the rest of the answers are indeed misleading. – jupi Feb 06 '15 at 08:58
Agreed with others this does not select the value. I suggest removing this answer, given the seemed consensus regarding the question. – theUtherSide Jan 07 '16 at 00:38
Seems to select the option just fine, at least in Chrome. – Adam Aug 09 '16 at 17:07
5

@theUtherSide: I would not always go by a consensus. The `val()` setter on a `select` is implemented by setting the selected property of a child `option` where the value matches, so is really does do what the question wanted (*but only for value searches and not text searches*). – iCollect.it Ltd Sep 06 '16 at 11:24

score 75 · Answer 4 · edited Sep 10 '14 at 22:47

75

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

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

edited Sep 10 '14 at 22:47

Pbk1303

3,702
2
32
47

answered May 07 '13 at 14:14

mold

1,012
7
17

5

I'm not sure you need the .change() method. – Phillip Senn Jul 02 '14 at 04:35
8

The `.change()` was necessary. I had an example where I was switching thumbnails based on a SELECT. When I uploaded a custom theme, it was supposed to select "Custom Theme" from the list of options. The `.prop()` call worked, but without the `.change()`, the thumbnail image on the right of my select never updated. – Volomike Dec 21 '14 at 05:38
4

.change() was the best advise. +1 – Ja8zyjits Jan 25 '16 at 08:29
1

Note: a boolean `prop` value generates the same output. e.g. `.prop('selected', true)` – iCollect.it Ltd Sep 06 '16 at 09:29
Depends, some browsers - maybe old browsers - need of the string 'selected'. I think the majority of them support the text string. – mold Jan 18 '17 at 14:13

iCollect.it Ltd · Answer 5 · 2016-09-06T12:13:09.743

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.

score 16 · Answer 6 · answered Jan 05 '16 at 14:58

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

perumal N · Answer 7 · 2019-10-28T06:35:09.853

15

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>

edited Oct 28 '19 at 06:35

answered Feb 17 '18 at 05:04

perumal N

641
2
10
27

score 14 · Answer 8 · answered Dec 16 '14 at 18:17

14

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

answered Dec 16 '14 at 18:17

João Paulo Oliveira

319
3
2

Thank you for your post, but what does this answer add to the conversation that is not included in the accepted answers? – Edward Dec 16 '14 at 18:55
if there is an option already selected then this will fail as a drop-down can't have more than one item selected unless it is a multi-select. You need to do .prop('selected',true) – derekcohen Jun 09 '15 at 12:42

score 13 · Answer 9 · edited Feb 01 '12 at 21:02

13

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.

edited Feb 01 '12 at 21:02

Udo Held

12,314
11
67
93

answered Feb 01 '12 at 17:34

Sandro

131
1
2

Yoel Duran · Answer 10 · 2022-12-29T16:18:59.467

11

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

edited Dec 29 '22 at 16:18

answered Jul 09 '19 at 12:53

Yoel Duran

381
3
5

Please edit your answer so the code is formatted as code. Do this by using the toolbar, or by simply indenting all lines of each code block by four spaces. – beruic Jul 09 '19 at 13:13

score 10 · Answer 11 · answered Nov 24 '08 at 16:19

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>

Nick Tsai · Answer 12 · 2017-06-22T04:44:22.727

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.

score 8 · Answer 13 · answered Sep 22 '17 at 18:27

8

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>

answered Sep 22 '17 at 18:27

perumal N

641
2
10
27

score 7 · Answer 14 · answered Oct 11 '13 at 13:47

7

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

answered Oct 11 '13 at 13:47

Miguel

3,349
2
32
28

score 5 · Answer 15 · edited Aug 14 '13 at 08:22

5

i'll go with:-

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

edited Aug 14 '13 at 08:22

CRUSADER

5,486
3
28
64

answered Aug 14 '13 at 08:05

user2606817

115
2
4

score 5 · Answer 16 · answered May 30 '16 at 06:49

5

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

answered May 30 '16 at 06:49

Pratik Kamani

758
7
23

score 3 · Answer 17 · answered Mar 01 '13 at 14:11

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

score 3 · Answer 18 · answered Feb 04 '16 at 02:06

3

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

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

answered Feb 04 '16 at 02:06

FLICKER

6,439
4
45
75

score 2 · Answer 19 · edited Dec 14 '15 at 13:36

2

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

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

edited Dec 14 '15 at 13:36

Bud Damyanov

30,171
6
44
52

answered Nov 15 '15 at 07:35

Jitesh Sojitra

3,655
7
27
46

score 2 · Answer 20 · answered Oct 23 '16 at 04:12

2

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

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

answered Oct 23 '16 at 04:12

Md. Russel Hussain

51
2

score 1 · Answer 21 · answered Aug 16 '20 at 02:34

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.