jQuery - select option in select box

Question

Possible Duplicate:
jQuery / Programmatically Select an Option in Select Box

I was wondering, is it possible to select an option from a selectbox/combobox directly from jQuery. For example I want to select the option with the value 5 in a select with values from 1 to 10.

The only solution I can think of is to remove all options and recreate them with the right selected value, but that's a bit unefficient.

possible duplicate of [jQuery / Programmatically Select an Option in Select Box](http://stackoverflow.com/questions/1573930/jquery-programmatically-select-an-option-in-select-box) and [Most correct way to select option in — Felix Kling, Sep 13 '11 at 09:33
searched for it, but didn't find anything. thanks, the first suggestion did what i wanted. — Eduard Luca, Sep 13 '11 at 09:36
`@Eduard:` You can delete this question if you agree it's a duplicate of one of the ones @Felix listed. (Use the "delete" link below it.) — T.J. Crowder, Sep 13 '11 at 09:37
"jQuery / Programmatically Select an Option in Select Box" didn't come up when you searched for "jQuery select option in select box"??? That's a pretty serious search tool flaw if so. — Lightness Races in Orbit, Sep 13 '11 at 09:38
"3,161 search results for posts containing `select option in select box` tagged with `jquery`" — Lightness Races in Orbit, Sep 13 '11 at 09:39
@T.J. Crowder: can't delete it, as it has answers, I flagged it for removal. @ Tomalak: you're off topic, good job, you're a better searcher than me. — Eduard Luca, Sep 13 '11 at 09:39
`@Eduard:` Ah, yes, of course. Yet another reason people shouldn't answer questions that clearly have duplicates. :-) Re @Tomalak's comment, he's not a search ninja: When I took the title of your question ("jQuery - select option in select box") and pasted it into the search box here on SO, the second result (your question being the first) was a duplicate of this question. (Don't worry, duplicates happen, but it's worth checking things like that.) — T.J. Crowder, Sep 13 '11 at 10:05
I mean, I *am* a search ninja, but said search ninja skills were not required in this case. All you have to do is remove two words from that title and you get this one. — Lightness Races in Orbit, Sep 13 '11 at 10:30

score 59 · Accepted Answer · answered Sep 13 '11 at 09:35

59

Just treat the select box as you would any other input element:

$("#MySelectBox").val("5");

answered Sep 13 '11 at 09:35

njr101

9,499
7
39
56

score 17 · Answer 2 · edited Mar 06 '18 at 23:10

You can do this by adding the selected attribute in <option> tag.

$(document).ready(function () {
    $('#btn2').click(function(){
        $('#sel1 option[value=2]').attr('selected','selected');
    });
    $('#btn3').click(function(){
        $('#sel1 option[value=3]').attr('selected','selected');
    });
    $('#btn5').click(function(){
        $('#sel1 option[value=5]').attr('selected','selected');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<select id="sel1">
    <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>
    <option value='8'>Option 8</option>
    <option value='9'>Option 9</option>    
</select>
<input id="btn2" type=button value='Select 2' />
<input id="btn3" type=button value='Select 3' />
<input id="btn5" type=button value='Select 5' />

What is the other value of the selected attribute? I mean there's 'selected', is there 'unselected' or 'false' or anything like that? — Zilong Li, Jul 13 '18 at 04:07

score 8 · Answer 3 · answered Sep 13 '11 at 09:37

8

Of course you can

Just use this code to select option 5:

$("#ComboBox").val(5);

example

answered Sep 13 '11 at 09:37

JSantos

1,698
22
39

score 2 · Answer 4 · answered Sep 13 '11 at 09:36

All you have to do is go around setting the attribute selected to true or selected.

var arrayOfOptions = $('#mySelect option') //will return an array of options in the order they are found

Just iterate over them, something like:

for(var i=0; i<arrayOfOptions.length; i++) {
   var opt = arrayOfOptions[i];
   //feel free to check the index of i here if you want to set
   //a particular index to selected or a range.
   //similarly the range can be passed in as a function parameter.
   $(opt).attr('selected','selected');

}

score 0 · Answer 5 · answered Sep 13 '11 at 09:36

If I understand you correctly, you want to select the option with value=5 and mark it selected. If so, this should be it:

$("#selectBox[value='5']").attr('selected', 'selected');

This should also work:

$("#selectBox").attr('value', 5).attr('selected', 'selected');

jQuery - select option in select box

5 Answers5

Linked