Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 03 Aug, 2021
Geek Week

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: 
     

 

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :