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 =
</ 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:
- 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 =
</ 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.