JavaScript onchange Event function

javascript JavaScript onchange Event function Javascript Function Calling

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 Javascript Function Calling Chapter Next »