Skip to content
Related Articles

Related Articles

How to select first element in the drop-down list using jQuery ?
  • Last Updated : 29 Apr, 2021

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

Example: This example illustrate the approach discussed above. 
 

html




<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to select first element in the
        drop-down list using jQuery ?
    </title>
     
    <script src=
    </script>
</head>
 
<body style = "text-align:center;">
     
    <h1 style = "color:green;" >
        GeeksforGeeks
    </h1>
     
    <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
    </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" style =
        "font-size: 23px; font-weight: bold; color: green; ">
    </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>
</body>
 
</html>

Output: 
 

  • Before clicking on the button: 
     

  • After clicking on the button: 
     



Approach 2: 
 

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

Example: This example illustrate the approach discussed above. 
 

html




<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to select first element in the
        drop-down list using jQuery ?
    </title>
 
    <script src=
    </script>
</head>
 
<body style = "text-align:center;">
     
    <h1 style = "color:green;" >
        GeeksforGeeks
    </h1>
     
    <p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
    </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" style =
        "font-size: 23px; font-weight: bold; color: green; ">
    </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>
</body>
 
</html>

Output: 
 

  • Before clicking on the button: 
     

  • After clicking on the button: 
     

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :