Setting the selected attribute on a select list using jQuery

Question

I have the following HTML:

<select id="dropdown">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

I have the string "B" so I want to set the selected attribute on it so it will be:

<select id="dropdown">
    <option>A</option>
    <option selected="selected">B</option>
    <option>C</option>
</select>

How would I do this in jQuery?

Sampson · Accepted Answer · 2009-08-21 11:20:54Z

141

If you don't mind modifying your HTML a little to include the value attribute of the options, you can significantly reduce the code necessary to do this:

<option>B</option>

to

<option value="B">B</option>

This will be helpful when you want to do something like:

<option value="IL">Illinois</option>

With that, the follow jQuery will make the change:

$("select option[value='B']").attr("selected","selected");

If you decide not to include the use of the value attribute, you will be required to cycle through each option, and manually check its value:

$("select option").each(function(){
  if ($(this).text() == "B")
    $(this).attr("selected","selected");
});

edited Aug 21, 2009 at 11:20

answered Aug 21, 2009 at 11:06

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Jørn Schou-Rode Over a year ago

After adding the value attributes, the selection can also be done like this: $("#dropdown").val("B");

meeDamian Over a year ago

Setting .val() WILL NOT call .change() event binded to your <select>. Just saying...

Nagelfar Over a year ago

If you want to fire the .change() event binded to your select you can use $(this).change()

Sampson Over a year ago

@madtyn $.fn.prop didn't get added until 2011. This answer predates that by a few years. Additionally, though not my intention, by changing the attribute you can enable greater control over styling via attribute selectors.

Martin Schneider Over a year ago

.val() and .prop() don't change/set the attribute. But this behavior is required in some cases and is only done with .attr() jsfiddle.net/6sebLnrz

|

takrl · Accepted Answer · 2011-07-07 10:24:55Z

15

<select id="cars">
<option value='volvo'>volvo</option>
<option value='bmw'>bmw</option>
<option value='fiat'>fiat</option>
</select>

var make = "fiat";

$("#cars option[value='" + make + "']").attr("selected","selected");

edited Jul 7, 2011 at 10:24

takrl

6,5003 gold badges63 silver badges71 bronze badges

answered Dec 21, 2010 at 13:50

Darren Rose

1591 silver badge2 bronze badges

Comments

gBusato · Accepted Answer · 2015-09-25 14:16:38Z

14

If you are using JQuery, since the 1.6 you have to use the .prop() method :

$('select option:nth(1)').prop("selected","selected");

answered Sep 25, 2015 at 14:16

gBusato

8817 silver badges8 bronze badges

1 Comment

Diego Somar Over a year ago

This solution is best. .attr() doesn't allow multiple changes. .prop() does.

tvanfosson · Accepted Answer · 2009-08-21 11:00:44Z

4

I'd iterate through the options, comparing the text to what I want to be selected, then set the selected attribute on that option. Once you find the correct one, terminate the iteration (unless you have a multiselect).

 $('#dropdown').find('option').each( function() {
      var $this = $(this);
      if ($this.text() == 'B') {
         $this.attr('selected','selected');
         return false;
      }
 });

answered Aug 21, 2009 at 11:00

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

2 Comments

Bobby Jack Over a year ago

Is there a reason to use .find() rather than $('#dropdown option')? More efficient? The "var $this" stuff also looks wrong to me ...

tvanfosson Over a year ago

I think the difference is mainly stylistic. Under the hood I would expect them to operate basically the same way. Get a collection, filter it. I've started using $this as a way to hold a reference to the jQuery object. I've also seen self (or $self), but I think that's less clear.

Derek Veit · Accepted Answer · 2012-04-27 01:05:10Z

2

You can follow the .selectedIndex strategy of danielrmt, but determine the index based on the text within the option tags like this:

$('#dropdown')[0].selectedIndex = $('#dropdown option').toArray().map(jQuery.text).indexOf('B');

This works on the original HTML without using value attributes.

answered Apr 27, 2012 at 1:05

Derek Veit

3,8902 gold badges18 silver badges15 bronze badges

Comments

Regan · Accepted Answer · 2016-12-04 07:19:36Z

2

This can be a solution

$(document).on('change', 'select', function () {
            var value = $(this).val();
            $(this).find('option[value="' + value + '"]').attr("selected", "selected");
        })

answered Dec 4, 2016 at 7:19

Regan

213 bronze badges

Comments

danielrmt · Accepted Answer · 2009-08-21 11:00:33Z

1

You can use pure DOM. See http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

document.getElementById('dropdown').selectedIndex = 1;

but jQuery can help:

$('#dropdown').selectedIndex = 1;

answered Aug 21, 2009 at 11:00

danielrmt

1 Comment

tvanfosson Over a year ago

This presumes that you know which element has the desired value. That's not always the case when the list is generated dynamically.

Joe Chung · Accepted Answer · 2009-08-21 11:41:44Z

1

Code:

var select = function(dropdown, selectedValue) {
    var options = $(dropdown).find("option");
    var matches = $.grep(options,
        function(n) { return $(n).text() == selectedValue; });
    $(matches).attr("selected", "selected");
};

Example:

select("#dropdown", "B");

answered Aug 21, 2009 at 11:41

Joe Chung

12.2k1 gold badge26 silver badges33 bronze badges

Comments

user1981275 · Accepted Answer · 2014-02-02 15:53:01Z

1

$('#select_id option:eq(0)').prop('selected', 'selected');

its good

edited Feb 2, 2014 at 15:53

user1981275

13.5k11 gold badges78 silver badges105 bronze badges

answered Feb 2, 2014 at 15:28

Mikulasche

111 bronze badge

Comments

David · Accepted Answer · 2009-08-21 11:18:23Z

0

Something along the lines of...

$('select option:nth(1)').attr("selected","selected");

edited Aug 21, 2009 at 11:18

answered Aug 21, 2009 at 11:01

David

15.4k15 gold badges64 silver badges84 bronze badges

Collectives™ on Stack Overflow

Setting the selected attribute on a select list using jQuery

10 Answers 10

10 Comments

Comments

1 Comment

2 Comments

Comments

This can be a solution

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

10 Comments

Comments

1 Comment

2 Comments

Comments

This can be a solution

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related