simple code for creating dropdown box using javascript.
here i am calling javascript writen in another file list.js. The content of list.js is following
function fillCategory(){
// this function is used to fill the category list on load
addOption(document.drop_list.Category, "Karnataka", "Karnataka", "");
addOption(document.drop_list.Category, "Jharkhand", "Jharkhand", "");
addOption(document.drop_list.Category, "Hariyana", "Hariyana", "");
}
function SelectDistrict(){
// ON selection of category this function will work
removeAllOptions(document.drop_list.District);
addOption(document.drop_list.District, "", "District", "");
if(document.drop_list.Category.value == 'Karnataka'){
addOption(document.drop_list.District,"Bangalore", "Bangalore");
addOption(document.drop_list.District,"Kolar", "Kolar");
addOption(document.drop_list.District,"Hubali", "Hubali");
}
if(document.drop_list.Category.value == 'Jharkhand'){
addOption(document.drop_list.District,"Ranchi", "Ranchi");
addOption(document.drop_list.District,"Jamshedpur", "Jamshedpur");
addOption(document.drop_list.District,"Hazbagh", "Hazbagh", "");
}
if(document.drop_list.Category.value == 'Hariyana'){
addOption(document.drop_list.District,"Noida", "Noida");
addOption(document.drop_list.District,"Gurgaon", "Gurgaon");
addOption(document.drop_list.District,"Panipat", "Panipat");
}
}
function SelectCollege(){
// ON selection of District this function will work
removeAllOptions(document.drop_list.College);
addOption(document.drop_list.College, "", "College", "");
if(document.drop_list.District.value == 'Bangalore'){
addOption(document.drop_list.College,"BIT Bangalore", "BIT Bangalore");
addOption(document.drop_list.College,"MVIT Bangalore", "MVIT Bangalore");
}
if(document.drop_list.District.value == 'Kolar'){
addOption(document.drop_list.College,"BIT Kolar", "BIT Kolar");
addOption(document.drop_list.College,"BIT Kolar", "BIT Kolar");
}
if(document.drop_list.District.value == 'Hubali'){
addOption(document.drop_list.College,"YMCA", "YMCA");
addOption(document.drop_list.College,"IIT", "IIT");
}
if(document.drop_list.District.value == 'Ranchi'){
addOption(document.drop_list.College,"ZXA", "ZXA");
addOption(document.drop_list.College,"DSA", "DSA");
}
if(document.drop_list.District.value == 'Jamshedpur'){
addOption(document.drop_list.College,"QWE", "QWE");
addOption(document.drop_list.College,"ZXC", "ZXC");
}
if(document.drop_list.District.value == 'Hazbagh'){
addOption(document.drop_list.College,"ZDC", "ZDC");
addOption(document.drop_list.College,"FGV", "FGV");
}
if(document.drop_list.District.value == 'Noida'){
addOption(document.drop_list.College,"uio", "uio");
addOption(document.drop_list.College,"klj", "klj");
}
if(document.drop_list.District.value == 'Gurgaon'){
addOption(document.drop_list.College,"yhn", "yhn");
addOption(document.drop_list.College,"fgh", "fgh");
}
if(document.drop_list.District.value == 'Panipat'){
addOption(document.drop_list.College,"olm", "olm");
addOption(document.drop_list.College,"bnm", "bnm");
}
}
//////////////////
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
this is very simple to understand it.