Thursday 16 May 2013

Dynamic Dropdown list

<form>
 <table align="center" bgcolor="gray">
 <tr><td>State</td>
<td>
<select id="course_name" onChange="updateSecondSelection();">
<option value="0">Select your courses</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Assam">Assam</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Bihar">Bihar</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Delhi">Delhi</option>
<option value="Gujarat">Gujarat</option>
<option value="Goa">Goa</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>

</select></td>
</tr>
<tr>
<td>District</td>
<td>
<select id="training_location">
<option value="NA"></option>
</select>
<td></tr>
</table></form>
<script type="text/javascript" language="JavaScript">
function updateSecondSelection(){
var embeddedBasic = new Array('Hyderabad','Warangal');
var pcbBasic = new Array('Silchar','Guwahati','Golaghat','Nagaon','Sivasagar','Tezpur');
var arunanchalPradesh = new Array('Bubang','Changlang','Deban','Dharampur','Gandhigram','Jairampur','Rajanagar','Ranglum');
var andamanandNicobarIslands = new Array('');
var bihar = new Array('Patna','Gaya','Bhagalpur','Muzaffarpur','Purnia','Siwan','Motihari','Nawada','Buxar','Aurangabad');
var chhattisgarh = new Array('Raipur','Bilaspur','Rajnandgaon','Raigarh','Jagdalpur','Ambikapur','Dhamtari');
var delhi = new Array('New Delhi');
var gujarat = new Array('Ahmedabad','Surat','Surat','Rajkot','Rajkot','Jamnagar',' Junagadh','Gandhinagar','Nadiad','Morbi',' Surendranagar','Gandhidham','Godhra');
var goa = new Array('Goa');
var haryana = new Array('Faridabad','Gurgaon','Panipat','Yamunanagar','Rohtak','Hisar','Karnal','Sonipat','Panchkula','Bhiwani','Sirsa','Kurukshetra','Rewari');
var himachalPradesh = new Array('Chamba','Bharmaur','Masrur','Baijnath','Diyar','Khokhan','Manali','Simla');
var jammuandKashmir = new Array('Srinagar','Jammu','Anantanag');
var jharkhand = new Array('Dhanbad','Ranchi','Bokaro','Deoghar');
var karnataka = new Array('Bagalkot','Bangalore','Belgaum','Bellary','Bangalore','Mysore');
var kerala = new Array('Kakkanad','Painavu','Kannur','Palakkad');
var uttarPradesh = new Array('Agra','Aligarh','Allahabad',' Azamgarh','Bareilly','Basti','Chitrakoot','Gonda','Faizabad','Gorakhpur','Jhansi','Kanpur','Lucknow','Meerut','Mirzapur','Moradabad','Saharanpur','Varanasi');
var uttarakhand = new Array('Almora','Bageshwar','Chamoli ','Champawat','Dehradun','Haridwar','Nainital','Pauri','Pithoragarh','Rudraprayag','New Tehri','Rudrapur','Uttarkashi');

var course_name = document.getElementById('course_name');
var training_location = document.getElementById('training_location');
var selected = course_name.value;

/** Remove all options in second dropdown list selection **/
training_location.options.length=0;

if(selected=='Andhra Pradesh'){
for(node in embeddedBasic){
training_location.options[node] 
= new Option(embeddedBasic[node],embeddedBasic[node]);
}
}else if(selected=='Assam'){
for(node in pcbBasic){
training_location.options[node] 
= new Option(pcbBasic[node],pcbBasic[node]);
}
}else if(selected=='Arunachal Pradesh'){
for(node in arunanchalPradesh){
training_location.options[node] 
= new Option(arunanchalPradesh[node],arunanchalPradesh[node]);
}
}else if(selected=='Andaman and Nicobar Islands'){
for(node in andamanandNicobarIslands){
training_location.options[node] 
= new Option(andamanandNicobarIslands[node],andamanandNicobarIslands[node]);
}
}else if(selected=='Bihar'){
for(node in bihar){
training_location.options[node] 
= new Option(bihar[node],bihar[node]);
}
}else if(selected=='Chhattisgarh'){
for(node in chhattisgarh){
training_location.options[node] 
= new Option(chhattisgarh[node],chhattisgarh[node]);
}
}else if(selected=='Delhi'){
for(node in delhi){
training_location.options[node] 
= new Option(delhi[node],delhi[node]);
}
}else if(selected=='Gujarat'){
for(node in gujarat){
training_location.options[node] 
= new Option(gujarat[node],gujarat[node]);
}
}else if(selected=='Goa'){
for(node in goa){
training_location.options[node] 
= new Option(goa[node],goa[node]);
}
}else if(selected=='Haryana'){
for(node in haryana){
training_location.options[node] 
= new Option(haryana[node],haryana[node]);
}
}else if(selected=='Himachal Pradesh'){
for(node in himachalPradesh){
training_location.options[node] 
= new Option(himachalPradesh[node],himachalPradesh[node]);
}
}else if(selected=='Jammu and Kashmir'){
for(node in jammuandKashmir){
training_location.options[node] 
= new Option(jammuandKashmir[node],jammuandKashmir[node]);
}
}else if(selected=='Jharkhand'){
for(node in jharkhand){
training_location.options[node] 
= new Option(jharkhand[node],jharkhand[node]);
}
}else if(selected=='Karnataka'){
for(node in karnataka){
training_location.options[node] 
= new Option(karnataka[node],karnataka[node]);
}
}else if(selected=='Kerala'){
for(node in kerala){
training_location.options[node] 
= new Option(kerala[node],kerala[node]);
}
}else if(selected=='Uttar Pradesh'){
for(node in uttarPradesh){
training_location.options[node] 
= new Option(uttarPradesh[node],uttarPradesh[node]);
}
}else if(selected=='Uttarakhand'){
for(node in uttarakhand){
training_location.options[node] 
= new Option(uttarakhand[node],uttarakhand[node]);
}
}else{
training_location.options[0] = new Option('No option selected','NA');
}
}
</script>


No comments:

Post a Comment