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>
• 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>
You have selected the country Pakistan.
<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>