<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select Demo Using Javascript </TITLE>
<META NAME="Generator" CONTENT="Ajuba">
<META NAME="Author" CONTENT="Ajuba">
<META NAME="Keywords" CONTENT="Ajuba">
<META NAME="Description" CONTENT="Ajuba">
<SCRIPT LANGUAGE="JavaScript">
function fillDistrictsCombo() {
removeDistricts();
var firstStateArr = new Array("State1_District1" ,"State1_District2", "State1_District3");// In real application this will come from Database
var secondStateArr = new Array("State2_District1" ,"State2_District2", "State2_District3", "State2_District4", "State2_District5");// In real application this will come from Database
var thirdStateArr = new Array("State3_District1" ,"State3_District2", "State3_District3");// In real application this will come from Database
var objStatesCombo = document.getElementById("StatesCombo").options;
var objDistrictsCombo = document.getElementById("DistrictsCombo").options;
if(objStatesCombo[objStatesCombo.selectedIndex].va lue == 0) {
removeDistricts();
return false;
}
if(objStatesCombo[objStatesCombo.selectedIndex].va lue == 'State1') {
for(var i=1; i<=firstStateArr.length; i ) {
objDistrictsCombo.options[i] = new Option(firstStateArr[i-1], firstStateArr[i-1]);
}
return false;
}
if(objStatesCombo[objStatesCombo.selectedIndex].va lue == 'State2') {
for(var i=1; i<=secondStateArr.length; i ) {
objDistrictsCombo.options[i] = new Option(secondStateArr[i-1], secondStateArr[i-1]);
}
return false;
}
if(objStatesCombo[objStatesCombo.selectedIndex].va lue == 'State3') {
for(var i=1; i<=thirdStateArr.length; i ) {
objDistrictsCombo.options[i] = new Option(thirdStateArr[i-1], thirdStateArr[i-1]);
}
return false;
}
}
function removeDistricts() {
var objDistrictsCombo = document.getElementById("DistrictsCombo").options;
for(var i=0; i<=objDistrictsCombo.length; i ) {
objDistrictsCombo.options[i] = null;
}
objDistrictsCombo.options[0] = new Option("Select One", "Select One");
}
function checkState() {
var objStatesCombo = document.getElementById("StatesCombo").options;
if(objStatesCombo.selectedIndex == 0) {
alert("Please Select State Before Selecting District !");
return false;
}
return false;
}
</SCRIPT>
</HEAD>
<BODY>
<br/><br/>
Select State: <SELECT name="StatesCombo" length="25" onchange="fillDistrictsCombo()">
<option value="0">Select One</option>
<option value="State1">State1</option>
<option value="State2">State2</option>
<option value="State3">State3</option>
</SELECT>
<br/><br/><br/>
Select District: <SELECT name="DistrictsCombo" onclick="checkState()">
<option value="0">Select One</option>
</SELECT>
</BODY>
</HTML>
