How to select the first element in the dropdown using jquery?

JavascriptJqueryHtml

Javascript Problem Overview


I want to know how to select the first option in all select tags on my page using jquery.

tried this:

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

But didn't work

Javascript Solutions


Solution 1 - Javascript

Try this out...

$('select option:first-child').attr("selected", "selected");

Another option would be this, but it will only work for one drop down list at a time as coded below:

var myDDL = $('myID');
myDDL[0].selectedIndex = 0;

Take a look at this post on how to set based on value, its interesting but won't help you for this specific issue:

https://stackoverflow.com/questions/499405/change-selected-value-of-drop-down-list-with-jquery

Solution 2 - Javascript

Your selector is wrong, you were probably looking for

$('select option:nth-child(1)')

This will work also:

$('select option:first-child')

Solution 3 - Javascript

Ana alternative Solution for RSolgberg, which fires the 'onchange' event if present:

$("#target").val($("#target option:first").val());

https://stackoverflow.com/questions/1414276/how-to-make-first-option-of-select-selected-with-jquery

Solution 4 - Javascript

$("#DDLID").val( $("#DDLID option:first-child").val() );

For Complete Drop Down List Operations using Jquery

Solution 5 - Javascript

What you want is probably:

$("select option:first-child")

What this code

attr("selected", "selected");

is doing is setting the "selected" attribute to "selected"

If you want the selected options, regardless of whether it is the first-child, the selector is:

$("select").children("[selected]")

Solution 6 - Javascript

I'm answering because the previous answers have stopped working with the latest version of jQuery. I don't know when it stopped working, but the documentation says that .prop() has been the preferred method to get/set properties since jQuery 1.6.

This is how I got it to work (with jQuery 3.2.1):

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

I am using knockoutjs and the change bindings weren't firing with the above code, so I added .change() to the end.

Here's what I needed for my solution:

$('select option:nth-child(1)').prop("selected", true).change();

See .prop() notes in the documentation here: http://api.jquery.com/prop/

Solution 7 - Javascript

Here is a simple javascript solution which works in most cases:

document.getElementById("selectId").selectedIndex = "0";

Solution 8 - Javascript

if you want to check the text of selected option regardless if its the 1st child.

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}

Solution 9 - Javascript

    var arr_select_val=[];

    $("select").each(function() { 
        var name=this.name;
            arr_select_val[name]=$('select option:first-child').val();
    });


// Process the array object
     $('.orders_status_summary_div').print(arr_select_val);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAmr ElgarhyView Question on Stackoverflow
Solution 1 - JavascriptRSolbergView Answer on Stackoverflow
Solution 2 - JavascriptAistinaView Answer on Stackoverflow
Solution 3 - JavascriptMuhammad Omar ElShourbagyView Answer on Stackoverflow
Solution 4 - JavascriptvijayView Answer on Stackoverflow
Solution 5 - JavascriptRichNView Answer on Stackoverflow
Solution 6 - JavascriptBrandonView Answer on Stackoverflow
Solution 7 - JavascriptJagrutiView Answer on Stackoverflow
Solution 8 - JavascriptsarahView Answer on Stackoverflow
Solution 9 - JavascriptShivarajRHView Answer on Stackoverflow