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

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;"> 
        w3wiki 
    </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;"> 
        w3wiki 
    </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.