Full version: jsB@nk » Form » Dropdown » Dropdown Box Population
URL: https://www.javascriptbank.com/dropdown-box-population-revised.html
Multiple series of dropdown boxes (up to 3) are automatically populated based on previous selection. Revised to work with IE, Netscape, Firefox, and Opera.
Full version: jsB@nk » Form » Dropdown » Dropdown Box Population
URL: https://www.javascriptbank.com/dropdown-box-population-revised.html
<script type="text/javascript"><!--/* Revised by: DeWayne Whitaker :: http://www.aecdfw.comOriginal by: Andrew Berry */var arrItems1 = new Array();var arrItemsGrp1 = new Array();arrItems1[3] = "Truck";arrItemsGrp1[3] = 1;arrItems1[4] = "Train";arrItemsGrp1[4] = 1;arrItems1[5] = "Car";arrItemsGrp1[5] = 1;arrItems1[6] = "Boat";arrItemsGrp1[6] = 2;arrItems1[7] = "Submarine";arrItemsGrp1[7] = 2;arrItems1[0] = "Planes";arrItemsGrp1[0] = 3;arrItems1[1] = "Ultralight";arrItemsGrp1[1] = 3;arrItems1[2] = "Glider";arrItemsGrp1[2] = 3;var arrItems2 = new Array();var arrItemsGrp2 = new Array();arrItems2[21] = "747";arrItemsGrp2[21] = 0arrItems2[22] = "Cessna";arrItemsGrp2[22] = 0arrItems2[31] = "Kolb Flyer";arrItemsGrp2[31] = 1arrItems2[34] = "Kitfox";arrItemsGrp2[34] = 1arrItems2[35] = "Schwietzer Glider";arrItemsGrp2[35] = 2arrItems2[99] = "Chevy Malibu";arrItemsGrp2[99] = 5arrItems2[100] = "Lincoln LS";arrItemsGrp2[100] = 5arrItems2[57] = "BMW Z3";arrItemsGrp2[57] = 5arrItems2[101] = "F-150";arrItemsGrp2[101] = 3arrItems2[102] = "Tahoe";arrItemsGrp2[102] = 3arrItems2[103] = "Freight Train";arrItemsGrp2[103] = 4arrItems2[104] = "Passenger Train";arrItemsGrp2[104] = 4arrItems2[105] = "Oil Tanker";arrItemsGrp2[105] = 6arrItems2[106] = "Fishing Boat";arrItemsGrp2[106] = 6arrItems2[200] = "Los Angelas Class";arrItemsGrp2[200] = 7arrItems2[201] = "Kilo Class";arrItemsGrp2[201] = 7arrItems2[203] = "Seawolf Class";arrItemsGrp2[203] = 7function selectChange(control, controlToPopulate, ItemArray, GroupArray) { var myEle ; var x ; // Empty the second drop down box of any choices for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null; if (control.name == "firstChoice") { // Empty the third drop down box of any choices for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null; } // ADD Default Choice - in case there are no values myEle = document.createElement("option") ; myEle.value = 0 ; myEle.text = "[SELECT]" ; // controlToPopulate.add(myEle) ; controlToPopulate.appendChild(myEle) // Now loop through the array of individual items // Any containing the same child id are added to // the second dropdown box for ( x = 0 ; x < ItemArray.length ; x++ ) { if ( GroupArray[x] == control.value ) { myEle = document.createElement("option") ; //myEle.value = x ; myEle.setAttribute('value',x); // myEle.text = ItemArray[x] ; var txt = document.createTextNode(ItemArray[x]); myEle.appendChild(txt) // controlToPopulate.add(myEle) ; controlToPopulate.appendChild(myEle) } }}function selectChange(control, controlToPopulate, ItemArray, GroupArray) { var myEle ; var x ; // Empty the second drop down box of any choices for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null; if (control.name == "firstChoice") { // Empty the third drop down box of any choices for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null; } // ADD Default Choice - in case there are no values myEle=document.createElement("option"); theText=document.createTextNode("[SELECT]"); myEle.appendChild(theText); myEle.setAttribute("value","0"); controlToPopulate.appendChild(myEle); // Now loop through the array of individual items // Any containing the same child id are added to // the second dropdown box for ( x = 0 ; x < ItemArray.length ; x++ ) { if ( GroupArray[x] == control.value ) { myEle = document.createElement("option") ; //myEle.value = x ; myEle.setAttribute("value",x); // myEle.text = ItemArray[x] ; var txt = document.createTextNode(ItemArray[x]); myEle.appendChild(txt) // controlToPopulate.add(myEle) ; controlToPopulate.appendChild(myEle) } }}// --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form name=form><table align="center"> <tr> <td> <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);"> <option value="0" selected>[SELECT]</option> <option value="1">Land</option> <option value="2">Sea</option> <option value="3">Air</option> </select> </td><td> <select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);"> </select> <select id="thirdChoice" name="thirdChoice"> </select> </td> </tr></table></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->