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

03 Aug, 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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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.
simmytarika5
JavaScript-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
jQuery | prop() with Examples
jQuery | bind() with Examples
jQuery | change() with Examples
How to reverse array of DOM elements using jQuery ?
How to Dynamically Add/Remove Table Rows using jQuery ?
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
File uploading in React.js
Node.js fs.readFileSync() Method