How to select first element in the drop-down list using jQuery ?

Given a drop-down list containing options elements and the task is to get the first element of the select element using JQuery.

Approach 1:

• Select the first element of <select> element using the JQuery selector.
• Use .prop() property to get access to properties of that particular element.
• Change the selectedIndex property to 0 to get access to the first element. (Index starts with 0)

Example: This example illustrates the approach discussed above.  

html

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

<h1 style="color:green;">
    GeeksforGeeks
</h1>

<p id="GFG_UP">
</p>


<select id="select">
    <option value="GFG1">GFG1</option>
    <option value="GFG2">GFG2</option>
    <option value="GFG3">GFG3</option>
    <option value="GFG4">GFG4</option>
    <option value="GFG5">GFG5</option>
</select>

<br><br>

<button onclick="gfg_Run()">
    Click here
</button>

<p id="GFG_DOWN">
</p>


<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");

    el_up.innerHTML = "Click on the button to get the "
                + "first option's value using JQuery";

    function gfg_Run() {
        el_down.innerHTML =
            $("#select").prop("selectedIndex", 0).val();
    }
</script>

Output:

How to select first element in the drop-down list using jQuery ?

Approach 2:

• Select the <select> element using the JQuery selector.
• This selector is more specific and selects the first element using the option:nth-child(1).
• This will get access to the first element (Index starts with 1).

Example: This example illustrates the approach discussed above. 

html

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

<h1 style="color:green;">
    GeeksforGeeks
</h1>

<p id="GFG_UP">
</p>


<select id="select">
    <option value="GFG1">GFG1</option>
    <option value="GFG2">GFG2</option>
    <option value="GFG3">GFG3</option>
    <option value="GFG4">GFG4</option>
    <option value="GFG5">GFG5</option>
</select>

<br><br>

<button onclick="gfg_Run()">
    Click here
</button>

<p id="GFG_DOWN">
</p>


<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");

    el_up.innerHTML = "Click on the button to get the"
            + " first option's value using JQuery";

    function gfg_Run() {
        el_down.innerHTML =
            $('#select option:nth-child(1)').val();
    }
</script>

Output:

How to select first element in the drop-down list using jQuery ?

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.