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>
