OnChange Event In JavaScript For Dropdown
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of OnChange event in JavaScript for dropdown, it takes only one step to use onchange event in javascript for dropdown. onchange event includes text input or dropdown list and it also allowing you to compile a function.
OnChange event also used for changing the elements of Html.It easily detecting a user’s response. onchange event is generally useful for validation, detecting user’s input etc.
Step By Step Guide On OnChange Event In JavaScript For Dropdown :-
<html>
<head>
<title> javascript</title>
</head>
<body>
<h1> Select a language</h1>
<select id=”language” onchange=”changelanguage()”>
<option value= “hindi”>Hindi</option>
<option value=”english”>English</option>
<option value=”sanskrit”>Sanskrit</option>
</select>
<div id=”res”></div>
<script>
function changelanguage(){
var language= document.getElementById(“language”).value;
var res= document.getElementById(“res”);
res.textContent= “ selected language:” + language;
}
</script>
</body>
</html>
- Firstly, we use <html> tag it is the beginning of Html document.
- <head> tag defines the head section of html document.
- <title> tag defines the title name of html document. In this code the title name is “javascript”.
- <body> tag defines the content of html document.
- <h1> tag in code used for define the heading text in html
- Next we use select element with id as a “language” . It is a dropdown list that the users have an options to language selecting.
- We have use three option element in this code. Option has a value include languages- Hindi, English, Sanskrit. Then we close the select tag
- Now, the <div> method in this code will display the selecting language.
- Then, we create a javascript file “script.js” here we can write all the javascript code
- In this code, we can use changelanguage() function to give the value of this language.
- After that we can define a variable inside the function named language.In this variable we can use getElementById() method to accessing the select element by its id attribute and update the value of property of selected option.
- Then, we can define another variable inside the function named res. It uses getElementById() to assigning a reference to res variable.
- Next, will displaying the text “selected language:” concatenate with the selected language that we selected.
Conclusion :-
In conclusion, Using onchange event in javascript for dropdown is an easy one method.
We can use select element to dropdown the menu and we can also use different- different option where user can select any one option in these. For example- options include hindi, English, Sanskrit.
User can select any one option in these included option.We can use changelanguage() function when the user selects a language, changelanguage() function is called.
It update the selected value and updating the content of <div> element .So, this method defines how we using onchange event in javascript for dropdown.
I hope this article on OnChange event in JavaScript for dropdown helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
