JavaScript onchange Event function


javascript JavaScript onchange Event function How To Call A Javascript Function

How to write and call the onchange function in JavaScript?

We mostly call onchange function on drop down list HTML tags <select><option></option></select> . • Now we are going to use HTML tag <select> with id='mylist' . • On change the list option we will call " selectedoption() " function .

<select onchange="selectedoption()" id='mylist'> <option value="Pakistan">Pakistan</option> <option value="Turkey">Turkey</option> <option value="Canada">Canada</option> </select>

How to get the changing selected option value of drop down list <select> and display in paragraph tag?

• In selectedoption() we want to take the selected option of from <select> and want to display into the HTML paragraph tag with id=' myparagraph ' . First we will take the selected value from <select> using getElementById function then we will pass this value to the paragraph . • getElementById Full Guide Tutorial

<script type="text/javascript"> function selectedoption() { var selectedValue = document.getElementById("mylist").value; //Getting value from <select> var selectedCountry = "You have selected the country "+selectedValue; document.getElementById("myparagraph").innerHTML=selectedCountry; //Assigning inputvalue to <p> } </script>

Output of on change option and calling function

You have selected the country Pakistan.

Full Source Code:<select onchange="selectedoption()" id='mylist'> <option value="Pakistan">Pakistan</option> <option value="Turkey">Turkey</option> <option value="Canada">Canada</option> </select> <p id="myparagraph"></p> <script type="text/javascript"> function selectedoption() { var selectedValue = document.getElementById("mylist").value; //Getting value from <select> var selectedCountry = "You have selected the country "+selectedValue; document.getElementById("myparagraph").innerHTML=selectedCountry; //Assigning inputvalue to <p> } </script>
javascript How To Call A Javascript Function Chapter Next »