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:
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
Share your thoughts in the comments
Please Login to comment...