Single selection of Drop down listbox onChange

Today's topic is :- The selected option of a drop down listbox by using onChange event trigger. The onChange event will trigger 1 JavaScript function and we will try to read the selected item by using getElementById

Option 1:-
HTML CODE
<select>
    <option value="1">pankaj</option>
    <option value="2">sangwan</option>
</select>
JAVASCTIPT
$('select').on('change', function() {
  alert( this.value ); // output of your selected value

})

Option 2:-
HTML CODE
<select id="mySelect" onchange="copy();">
<option value="">Select a person:</option>
    <option value="pankaj" >pankaj</option>
    <option value="gurinder" >gurinder</option>
    <option value="avneet" >avneet</option>
    <option value="John Smith" >John Smith</option>
</select>
//value shows in here
<div id="label"></div>

JAVASCTIPT
function copy() { document.getElementById("label").innerHTML=document.getElementById("mySelect").value

}


Option 3:-
HTML CODE

<label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
  </select>
  <br/>
  <label for="country">Select a country</label>
  <select id="country">
    <option value="0">Select a country</option>

  </select>

JAVASCTIPT
<script type="text/javascript">
 //<![CDATA[
 // array of possible countries in the same order as they appear in the country selection list
 var countryLists = new Array(4)
 countryLists["empty"] = ["Select a Country"];
 countryLists["Asia"] = ["India", "China", "Japan", "Nepal"];
 countryLists["North America"] = ["Canada", "United States", "Mexico"];
 countryLists["South America"] = ["Argentina", "Chile", "Brazil"];
 countryLists["Europe"]= ["Spain", "France", "Germany", "Britain"];

 function countryChange(selectObj) {
 // get the index of the selected option
 var idx = selectObj.selectedIndex;
 // get the value of the selected option
 var which = selectObj.options[idx].value;
 // use the selected option value to retrieve the list of items from the countryLists array
 cList = countryLists[which];
 // get the country select element via its known id
 var cSelect = document.getElementById("country");
 // remove the current options from the country select
 var len=cSelect.options.length;
 while (cSelect.options.length > 0) {
 cSelect.remove(0);
 }
 var newOption;
 // create new options
 for (var i=0; i<cList.length; i++) {
 newOption = document.createElement("option");
 newOption.value = cList[i];  // assumes option string and value are the same
 newOption.text=cList[i];
 // add the new option
 try {
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE
 }
 catch (e) {
 cSelect.appendChild(newOption);
 }
 }
 }
//]]>

</script>