»
EnglishFrenchVietnamese

Print - Dependent combo boxes sample - JavaScriptBank.com

Full version: jsB@nk » Form » Dropdown » Dependent combo boxes sample
URL: https://www.javascriptbank.com/dependent-combo-boxes-sample.html

Dependent combo boxes sample © JavaScriptBank.comWhen 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



JavaScript
<SCRIPT language=javascript><!-- for comments on this script , contact me at  ruth@zahav.net.il --><!--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-->


HTML
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Select SubList: <SELECT onchange=reFillList1() size=2 name=sublist>   <OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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-->