How to use jQuery to select a dropdown option?
JavascriptJqueryHtmlDrop Down-MenuHtml SelectJavascript Problem Overview
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>.
Javascript Solutions
Solution 1 - Javascript
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>
Solution 2 - Javascript
The solution:
$("#element-id").val('the value of the option');
Solution 3 - Javascript
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;
Solution 4 - Javascript
I would do it this way
$("#idElement").val('optionValue').trigger('change');
Solution 5 - Javascript
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");
Solution 6 - Javascript
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.
Solution 7 - Javascript
Use the following code if you want to select an option with a specific value:
$('select>option[value="' + value + '"]').prop('selected', true);
Solution 8 - Javascript
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);
Solution 9 - Javascript
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);
Solution 10 - Javascript
$('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
Solution 11 - Javascript
With '
$('select').val('option-value');
Solution 12 - Javascript
Try this:
$('#mySelectElement option')[0].selected = true;
Regards!
Solution 13 - Javascript
answer with id:
$('#selectBoxId').find('option:eq(0)').attr('selected', true);
Solution 14 - Javascript
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.