Full version: jsB@nk » Form » Dropdown » Dependent combo boxes sample
URL: https://www.javascriptbank.com/dependent-combo-boxes-sample.html
When selecting a value from the first combo box, thesecond combo box will be filled in with new valuescorresponding to the selection from the first combo box.
Full version: jsB@nk » Form » Dropdown » Dependent combo boxes sample
URL: https://www.javascriptbank.com/dependent-combo-boxes-sample.html
<SCRIPT language=javascript><!-- for comments on this script , contact me at [email protected] --><!--var MainList=new Array(5);var SubList=new Array(11);var SubList1=new Array(22);//define objects for the main listfunction ListItem(nvalue,description){ //function for defining the elements of the main list this.nvalue=nvalue; this.description=description;}//define objects for the dependent listfunction ListSubItem(category,nvalue,description){ //function for defining the elements of the sublists this.category=category; this.nvalue=nvalue; this.description=description;}function PrepareData(){// the function will fill in 2 arrays. The function can be filled in ASP// so the values from the array will come from the databaseMainList[0]=new ListItem(0,"Fruits");MainList[1]=new ListItem(1,"Vegetables");MainList[2]=new ListItem(2,"Sex");MainList[3]=new ListItem(3,"Girls names");MainList[4]=new ListItem(4,"Boys names");MainList[5]=new ListItem(5,"Cities");//Fill the values of the second list//The first parameter is the category, the second is the value to be returned//from this selection and the third one is the text that appears in the//combo boxSubList[0]=new ListSubItem(0,0,"Apples");SubList[1]=new ListSubItem(0,1,"Pear");SubList[2]=new ListSubItem(1,2,"Tomato");SubList[3]=new ListSubItem(1,3,"Cucumber");SubList[4]=new ListSubItem(2,4,"Male");SubList[5]=new ListSubItem(2,5,"Female");SubList[6]=new ListSubItem(3,6,"Georgina");SubList[7]=new ListSubItem(3,7,"Susanne");SubList[8]=new ListSubItem(4,8,"Peter");SubList[9]=new ListSubItem(4,9,"Paul");SubList[10]=new ListSubItem(5,10,"Amsterdam");SubList[11]=new ListSubItem(5,11,"Paris");//Fill the values of the third list// Similar to the second listSubList1[0]=new ListSubItem(0,0,"Delicious");SubList1[1]=new ListSubItem(0,1,"Jonathan");SubList1[2]=new ListSubItem(1,2,"Yellow Pear");SubList1[3]=new ListSubItem(1,3,"Green Pear");SubList1[4]=new ListSubItem(2,4,"Tomato");SubList1[5]=new ListSubItem(2,5,"Cherry Tomato");SubList1[6]=new ListSubItem(3,6,"Yellow");SubList1[7]=new ListSubItem(3,7,"Green Cucumber ");SubList1[8]=new ListSubItem(4,8,"Male 1");SubList1[9]=new ListSubItem(4,9,"Male 2");SubList1[10]=new ListSubItem(5,10,"Brunette");SubList1[11]=new ListSubItem(5,11,"Blond");SubList1[12]=new ListSubItem(6,12,"Georgina She");SubList1[13]=new ListSubItem(6,13,"Georgina who");SubList1[14]=new ListSubItem(7,14,"Susanne Garcia");SubList1[15]=new ListSubItem(7,15,"Susanne Sommers");SubList1[16]=new ListSubItem(8,16,"Peter Smit");SubList1[17]=new ListSubItem(8,17,"Peter Wright");SubList1[18]=new ListSubItem(9,18,"McCartney");SubList1[19]=new ListSubItem(9,19,"Harris");SubList1[20]=new ListSubItem(10,20,"Schiphol Airport");SubList1[21]=new ListSubItem(10,20,"Channels");SubList1[22]=new ListSubItem(11,21,"Tour Eiffel");SubList1[23]=new ListSubItem(11,21,"Louvre Museum");}function reFillList(){ var selValue; var nOption; selValue=document.form1.mainlist[document.form1.mainlist.selectedIndex].value; //alert("Selected value=" +selValue); // clear the actual list by setting its length to 0 document.form1.sublist.length=0 for (var i=0; i < SubList.length;i++){ //fill the box with the values corresponding to //the category in the first box if (SubList[i].category==selValue) { nOption=document.form1.sublist.length; document.form1.sublist.options[nOption]=new Option(SubList[i].description,SubList[i].nvalue); } } document.form1.sublist.options[0].selected=true;}function reFillList1(){ var selValue; var nOption; selValue=document.form1.sublist[document.form1.sublist.selectedIndex].value; //alert("Selected value=" +selValue); // clear the actual list by setting its length to 0 document.form1.sublist1.length=0 for (var i=0; i < SubList1.length;i++){ //fill the box with the values corresponding to //the category in the first box if (SubList1[i].category==selValue) { nOption=document.form1.sublist1.length; document.form1.sublist1.options[nOption]=new Option(SubList1[i].description,SubList1[i].nvalue); } } document.form1.sublist1.options[0].selected=true;}function checkvalues(){//show the selected values var val1; var val2;var val3; var cString; val1=document.form1.mainlist[document.form1.mainlist.selectedIndex].value; val2=document.form1.sublist[document.form1.sublist.selectedIndex].value; val3=document.form1.sublist1[document.form1.sublist1.selectedIndex].value; cString="Main List=value:" + val1 + "-Description:"+MainList[val1].description cString+="\n" cString+="Sub List=value:" + val2+ "-Description:"+SubList[val2].description cString+="\n" cString+="Sub List1=value:" + val3+ "-Description:"+SubList1[val3].description alert(cString);}//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><FORM name=form1><SCRIPT language=javascript><!--var page=""var i;// call the function that fills in the arrays so we'll use them to fill the selectPrepareData();page+="Select the main list: ";page+="<SELECT NAME='mainlist' onChange='reFillList();reFillList1()'>";for (i=0;i<MainList.length;i++) { page+="<OPTION VALUE="+MainList[i].nvalue; if (i==0) { page+=" SELECTED "; } page+=">"+MainList[i].description;}page+="</SELECT>";document.write(page);//--></SCRIPT><P> Select SubList: <SELECT onchange=reFillList1() size=2 name=sublist> <OPTION> </OPTION></SELECT><SCRIPT language=javascript><!--// since we have selected the first value in the main list, we have to fill this listreFillList();//--></SCRIPT> </P><BR>SubList1:<SELECT size=2 name=sublist1> <SCRIPT language=Javascript><!--reFillList1();//--> </SCRIPT></SELECT> <P><INPUT id=button1 onclick=checkvalues() type=button value="Press me" name=button1> </P></FORM><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->