been trying to get this code to work for a few days now cant seem to get it right. i just want the first set of drop down list to fill dynamically, a well as the 2 and set to be able to fill dynamically. but i also want the second to be able to be filled but clicking a checkbox and the values of the first 3 drop down list go into the second.
<head>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
var firstChoice2 = 0;
var secondChoice2 = 0;
var thirdChoice5= 0;
function InitSaveVariables(form) {
firstChoice2Index = form.firstChoice2.selectedIndex;
firstChoice2 = form.firstChoice2[firstChoice2Index].value;
secondChoice2Index = form.secondChoice2.selectedIndex;
secondChoice2 = form.secondChoice2[secondChoice2Index].value;
thirdChoice5Index = form.thirdChoice5.selectedIndex;
thirdChoice5 = form.thirdChoice5[thirdChoice5Index].value;
}
function ShipToBillPerson(form) {
if (form.copy.checked) {
InitSaveVariables(form);
form.firstChoice2.selectedIndex = form.firstChoice.selectedIndex;
form.secondChoice2.selectedIndex = form.secondChoice.selectedIndex;
form.thirdChoice5.selectedIndex = form.thirdChoice.selectedIndex;
}
else {
form.firstChoice2.selectedIndex = firstChoice2Index;
form.secondChoice2.selectedIndex = secondChoice2Index;
form.thirdChoice5.selectedIndex = thirdChoice5Index;
}
}
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] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0
arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1
arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2
arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5
arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3
arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4
arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6
arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7
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") ;
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>
</head>
<body>
<form name=form>
<table align="center" border="1">
<tr >
<td><input type="checkbox" name="copy" OnClick="javascript:ShipToBillPerson(this.form);" value="checkbox"> this box should fill the second box with the first dropdown values
</td>
</tr>
<tr>
<td> </td>
</tr>
<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>
</tr>
<tr>
<td>
<select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);">
<option value="0" selected>[SELECT]</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="thirdChoice" name="thirdChoice">
<option value="0" selected>[SELECT]</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Second set of information</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<select id="firstChoice2" name="firstChoice2" onchange="selectChange(this, form.secondChoice2, 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>
</tr>
<tr>
<td>
<select id="secondChoice2" name="secondChoice2" onchange="selectChange(this, form.thirdChoice5, arrItems2, arrItemsGrp2);">
<option value="0" selected>[SELECT]</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="thirdChoice5" name="thirdChoice5">
<option value="0" selected>[SELECT]</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
<head>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
var firstChoice2 = 0;
var secondChoice2 = 0;
var thirdChoice5= 0;
function InitSaveVariables(form) {
firstChoice2Index = form.firstChoice2.selectedIndex;
firstChoice2 = form.firstChoice2[firstChoice2Index].value;
secondChoice2Index = form.secondChoice2.selectedIndex;
secondChoice2 = form.secondChoice2[secondChoice2Index].value;
thirdChoice5Index = form.thirdChoice5.selectedIndex;
thirdChoice5 = form.thirdChoice5[thirdChoice5Index].value;
}
function ShipToBillPerson(form) {
if (form.copy.checked) {
InitSaveVariables(form);
form.firstChoice2.selectedIndex = form.firstChoice.selectedIndex;
form.secondChoice2.selectedIndex = form.secondChoice.selectedIndex;
form.thirdChoice5.selectedIndex = form.thirdChoice.selectedIndex;
}
else {
form.firstChoice2.selectedIndex = firstChoice2Index;
form.secondChoice2.selectedIndex = secondChoice2Index;
form.thirdChoice5.selectedIndex = thirdChoice5Index;
}
}
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] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0
arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1
arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2
arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5
arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3
arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4
arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6
arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7
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") ;
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>
</head>
<body>
<form name=form>
<table align="center" border="1">
<tr >
<td><input type="checkbox" name="copy" OnClick="javascript:ShipToBillPerson(this.form);" value="checkbox"> this box should fill the second box with the first dropdown values
</td>
</tr>
<tr>
<td> </td>
</tr>
<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>
</tr>
<tr>
<td>
<select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);">
<option value="0" selected>[SELECT]</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="thirdChoice" name="thirdChoice">
<option value="0" selected>[SELECT]</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Second set of information</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<select id="firstChoice2" name="firstChoice2" onchange="selectChange(this, form.secondChoice2, 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>
</tr>
<tr>
<td>
<select id="secondChoice2" name="secondChoice2" onchange="selectChange(this, form.thirdChoice5, arrItems2, arrItemsGrp2);">
<option value="0" selected>[SELECT]</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="thirdChoice5" name="thirdChoice5">
<option value="0" selected>[SELECT]</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
