CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menuhtml-select
dotty
dotty

Reputation: 41433

How to use jQuery to select a dropdown option?

I was wondering if it’s possible to get jQuery to select an <option>, say the 4th item, in a dropdown box?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

I want the user to click a link, then have the <select> box change its value, as if the user has selected it by clicking on the <option>.

Upvotes: 179

Views: 463961

Answers (14)

JB-007
JB-007

Reputation: 2441

This works for me:

$selectedindex=4

If you want to randomise options, you could always do something like this:

$0selectedindex=Math.floor((Math.random()*($0.length-1)+1)

Whilst the 2nd lies outside scope of your questions, it serves to illustrate how 1st could be applied / amended as req.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195952

How about

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

Example:

$('select>option:eq(3)').attr('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

for modern versions of jquery you should use the .prop() instead of .attr()

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

Example:

$('select>option:eq(3)').prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

Upvotes: 203

Harold Sota
Harold Sota

Reputation: 7566

The solution:

$("#element-id").val('the value of the option');

Upvotes: 164

Mamunur Rashid
Mamunur Rashid

Reputation: 281

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

Upvotes: 6

Francesco Gasparetto
Francesco Gasparetto

Reputation: 1963

I would do it this way

 $("#idElement").val('optionValue').trigger('change');

Upvotes: 43

Ionică Bizău
Ionică Bizău

Reputation: 113335

The easiest way is val(value) function:

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

And to get the selected value you give no arguments:

$('select').val();

Also, you if you have <option value="valueToSelect">...</option>, you can do:

$('select').val("valueToSelect");

DEMO

Upvotes: 26

nlareu
nlareu

Reputation: 125

Use the following code if you want to select an option with a specific value:

$('select>option[value="' + value + '"]').prop('selected', true);

Upvotes: 11

Nicolas Finelli
Nicolas Finelli

Reputation: 2178

Try this:

$('#mySelectElement option')[0].selected = true;

Regards!

Upvotes: 3

Savaratkar
Savaratkar

Reputation: 2074

With '' element usually we use 'value' attribute. It will make it easier to set then:

$('select').val('option-value');

Upvotes: 3

kanitw
kanitw

Reputation: 892

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

One caveat here is if you have javascript watching for select/option's change event you need to add .trigger('change') so the code become. 

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

because only calling .attr('selected', 'selected') does not trigger the event

Upvotes: 3

Ja͢ck
Ja͢ck

Reputation: 173522

HTML select elements have a selectedIndex property that can be written to in order to select a particular option:

$('select').prop('selectedIndex', 3); // select 4th option

Using plain JavaScript this can be achieved by:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

Upvotes: 56

Javad Masoumi
Javad Masoumi

Reputation: 357

answer with id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

Upvotes: 2

Lee D
Lee D

Reputation: 12931

I prefer nth-child() to eq() as it uses 1-based indexing rather than 0-based, which is slightly easier on my brain.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

Upvotes: 3

Victor
Victor

Reputation: 4721

if your options have a value, you can do this:

$('select').val("the-value-of-the-option-you-want-to-select");

'select' would be the id of your select or a class selector. or if there is just one select, you can use the tag as it is in the example.

Upvotes: 25

Related Questions