Welcome folks today in this blog post we will be looking on how to get dropdown value of select input field
using the onchange
event in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <label for="teams">Select your team:</label> <select id="team" onchange="selectTeam()"> <option value="India">India</option> <option value="Australia">Australia</option> <option value="England">England</option> <option value="New Zealand" selected>New Zealand</option> <option value="South Africa">South Africa</option> </select> <div id="info"> </div> </body> <script> selectTeam() function selectTeam(){ let team = document.getElementById('team').value document.getElementById('info').innerHTML = `You have selected ${team} team` } </script> </html> |
As you can see we have added the html
code where we have the select
tag to select the cricket teams. Inside it we have given the id
to the select tag so that we can target it’s value inside javascript. And also we have binded
onchange event listener where we are attaching the selectTeam()
method.
And inside this method we are getting the value
of the selected team from the dropdown and then we are showing it inside the div
tag having the info
id attached to it.