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

Last Updated : 06 Jun, 2023

Given a drop-down list containing options elements, 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 the prop() method 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 implements the above approach.

html

<!DOCTYPE html>
<html lang="en">

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

    <title>
        How to select first element in the 
        drop-down list using jQuery ?
    </title>

    <style>
        body {
            text-align: center;
        }

        select {
            width: 160px;
            height: 30px;
        }
    </style>
</head>

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

    <p>
        Click on the button to get the first 
        option's value using JQuery
    </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"></p>

    <script>
        let el = document.getElementById("GFG");

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

</html>

Output:

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 implements the above approach.

html

<!DOCTYPE html>
<html lang="en">

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

    <title>
        How to select first element in the 
        drop-down list using jQuery ?
    </title>

    <style>
        body {
            text-align: center;
        }

        select {
            width: 160px;
            height: 30px;
        }
    </style>
</head>

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

    <p>
        Click on the button to get the first 
        option's value using jQuery
    </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"></p>
    
    <script>
        let el = document.getElementById("GFG");
        
        function gfg_Run() {
            el.innerHTML = 
                $('#select option:nth-child(1)').val();
        }         
    </script>
</body>

</html>

Output:

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