JQuery - how to select dropdown item based on value

Question

I want set a dropdown(select) to be change based on the value of the entries.

I have

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

And I know that I want to change the dropdown so that the option with the value of "fg" is selected. How can I do this with JQuery?

I thought it was that simple, but didnt seem to work. I guess it's debugging time. — Mark W, Jan 05 '12 at 14:30
possible duplicate of [Selecting option by text content with jQuery](http://stackoverflow.com/questions/1009740/selecting-option-by-text-content-with-jquery) — Christopher, Jul 29 '13 at 08:24
Your title's a little misleading. You're not selecting a dropdown, you're selecting an option in a dropdown... which is why there are 7 answers that don't help me at all... — user1566694, Feb 03 '16 at 18:30
@user1566694 If you want to get technical it's not actually called a dropdown, it's a "select" — Mark W, Feb 04 '16 at 11:58

score 182 · Accepted Answer · edited Oct 01 '20 at 09:08

182

You should use

$('#dropdownid').val('selectedvalue');

Here's an example:

$('#dropdownid').val('selectedvalue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>

edited Oct 01 '20 at 09:08

Ted

3,985
1
20
33

answered Jan 05 '12 at 14:20

Jeaf Gilbert

11,495
19
78
105

21

Agreed with above. According to your code, it would be```$('#mySelect option[value="fg"]').attr('selected', true)``` – Martavis P. Jul 16 '15 at 06:53
My mistake. I've seen it not work in some cases but it clearly does in the fiddle. – Martavis P. Jul 17 '15 at 05:00
2

I would just be careful with this. It does not trigger the 'change' event on the – Chad Fisher Apr 18 '17 at 19:09
2

@ChadFisher If you are using the change event, trigger it with `$('#dropdownid').val('selectedvalue').trigger('change');` – Liam Mar 13 '19 at 19:50
Indeed trigger change helps when you have written some follow up code to perform certain actions like model update, even the ASP.net view model updates too happen on the change event of the DD. +1 – Mantra Jan 21 '20 at 12:47
Am i doing something wrong? I type this in console `$('#dropdownid').val('1');` I get this return and nothing else: `Object { context: HTMLDocument https://stackoverflow.com/questions/8743975/jquery-how-to-select-dropdown-item-based-on-value, selector: "#dropdownid" }` – Qrow Saki Nov 07 '20 at 19:59

score 23 · Answer 2 · edited Jul 13 '17 at 07:52

23

$('#yourdropddownid').val('fg');

Optionally,

$('select>option:eq(3)').attr('selected', true);

where 3 is the index of the option you want.

Live Demo

edited Jul 13 '17 at 07:52

Uwe Keim

39,551
56
175
291

answered Jan 05 '12 at 14:21

Ayush

41,754
51
164
239

score 15 · Answer 3 · answered Jan 05 '12 at 14:22

15

$('#mySelect').val('fg');...........

answered Jan 05 '12 at 14:22

Royi Namir

144,742
138
468
792

Abdo-Host · Answer 4 · 2020-01-21T14:17:06.847

9

 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");

edited Jan 21 '20 at 14:17

answered Feb 02 '16 at 09:44

Abdo-Host

2,470
34
33

1

or $('#mySelect').val('ab').trigger("change");; in case if you are using select2 plugin. – Vaibhav Jain Feb 15 '16 at 14:20
1

.change() helped me to update my ASP.net MVC model attribute. Thanks for the answer. – Mantra Jan 21 '20 at 12:41
Thank You... .trigger('change') Works Perfectly! – LUISAO Nov 04 '20 at 00:12

score 8 · Answer 5 · answered Mar 06 '18 at 05:43

You can use this jQuery code which I find it eaiser to use:

$('#your_id [value=3]').attr('selected', 'true');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>

score 5 · Answer 6 · answered Jan 05 '12 at 14:21

5

You can simply use:

$('#select_id').val('fg')

answered Jan 05 '12 at 14:21

Dagang

24,586
26
88
133

score 2 · Answer 7 · answered Jul 07 '13 at 11:40

2

In your case $("#mySelect").val("fg") :)

answered Jul 07 '13 at 11:40

Kamran Ahmed

11,809
23
69
101

score 2 · Answer 8 · answered Jul 11 '16 at 05:52

2

May be too late to answer, but at least some one will get help.

You can try two options:

This is the result when you want to assign based on index value, where '0' is Index.

 $('#mySelect').prop('selectedIndex', 0);

don't use 'attr' since it is deprecated with latest jquery.

When you want to select based on option value then choose this :

 $('#mySelect').val('fg');

where 'fg' is the option value

answered Jul 11 '16 at 05:52

Manjuboyz

6,978
3
21
43

Index based selection is rarely used however it's good option given the scenario where you have written some generic code for setting the drop downs and the values vary with different DD's. Thanks :). – Mantra Jan 21 '20 at 12:44

score 2 · Answer 9 · answered Feb 05 '19 at 20:47

$('#dropdownid').val('selectedvalue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>

score 1 · Answer 10 · answered Jun 25 '20 at 09:11

This code worked for me:

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

With this HTML select list:

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>

score 0 · Answer 11 · edited Nov 19 '19 at 12:05

0

You can select dropdown option value by name

// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }

});

edited Nov 19 '19 at 12:05

MjZac

3,476
1
17
28

answered Oct 17 '13 at 11:37

Hardik

1,283
14
34

user1585204 · Answer 12 · 2017-03-14T12:03:35.837

I have a different situation, where the drop down list values are already hard coded. There are only 12 districts so the jQuery Autocomplete UI control isn't populated by code.

The solution is much easier. Because I had to wade through other posts where it was assumed the control was being dynamically loaded, wasn't finding what I needed and then finally figured it out.

So where you have HTML as below, setting the selected index is set like this, note the -input part, which is in addition to the drop down id:

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

Something else figured out about the Autocomplete control is how to properly disable/empty it. We have 3 controls working together, 2 of them mutually exclusive:

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

Some of this is beyond the scope of the post and I don't know where to put it exactly. Since this is very helpful and took some time to figure out, it's being shared.

Und Also ... to enable a control like this, it's (disabled, false) and NOT (enabled, true) -- that also took a bit of time to figure out. :)

The only other thing to note, much in addition to the post, is:

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

All shared because it took too long to learn these things on the fly. Hope this is helpful.

You've gone way off topic here. The question is a simple change a select based on its value with JQuery. There are no UI elements involved. — Mark W, Mar 14 '17 at 13:48

score 0 · Answer 13 · edited Jun 26 '21 at 22:21

0

$('select#myselect option[value="ab"]')

edited Jun 26 '21 at 22:21

Yuriy Yakym

3,616
17
30

answered Apr 02 '19 at 01:35

MythBank

31
1
2

Learn [how to use code block](http://stackoverflow.com/editing-help) to show your code – Circle Hsiao Apr 02 '19 at 02:01

score 0 · Answer 14 · answered Sep 01 '21 at 07:20

either can be used to get the selected option value

$('#dropdownID').on('change', function () {
        var dropdownselected=$("#dropdownID option:selected").val();
        });
     
     or 
     
     $('#dropdownID').on('change', function () {
        var dropdownselected=this.selectedOptions[0].value;
     });

JQuery - how to select dropdown item based on value

14 Answers14

You should use

Here's an example:

Linked