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.
