Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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

Approach 1: 

Example: This example implements the above approach.  

html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
    </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: 

Example: This example implements the above approach. 

html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
    </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.



Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads