Trouble clearing third of three dropdowns

Hi everyone,

I have been trying to create a form with 3 dropdowns. When you choose from the first called field4 it populates the next called field5

Similarly when you choose from field5 then field6 gets populated.

It all seemed to work fine but then I realised that if I changed the first drop to another choice after having made choices from the other two drops then there was a problem. The second drop changed fine but I then wanted the third drop to become "Choose One" until a choice had again been made from the Second drop. (Hope that makes sense!)

Anyway, I have almost done it, but if I change my first drop now (with the third drop set to a choice) then the third drop appears to change to be completely blank and I have a choice of blank or "Choose one"

Here is my code, I'm no Javascript expert and I have been struggling on this for hours - I am sure one of the experts here can spot in an instant where I have gone wrong. - I have put *** infront of the lines I added which I thought would do the trick for me

Thanks very much in advance


<SCRIPT LANGUAGE = "JAVASCRIPT">
var emptyOption=('Choose One,0')
var arr1=new Array('','Accountancy,31','Banking,30');
var arr6=new Array('','Teaching,29');
var arr29=new Array('','Music teacher,1');
var arr30=new Array('','Bank Clerk,2','Bank Manager,3');
var arr31=new Array('','Accountant,4','Financial Controller,5');
var selArr=new Array();
var selArr2=new Array();
var testIt;
function setOptions(chosen) {
testIt="";
var selbox = document.form1.field5;
*** var selboxx = document.form1.field6;
selbox.options.length = 0;
*** selboxx.options.length = 0;
if (chosen == "0") {
selbox.options[selbox.options.length] = new Option('Choose One',' ');
*** selboxx.options[selbox.options.length] = new Option('Choose One',' ');
}
if (chosen != "0") {
eval('selArr=arr'+(parseInt(chosen)));
selbox.options[selbox.options.length] = new Option('Choose One','0');
*** selboxx.options[selbox.options.length] = new Option('Choose One','0');
for (var i = 1;i < selArr.length;i++){
selArr2=selArr[i].split(",");
testIt +=selArr2[0]+' - '+selArr2[1]+'\n';
selbox.options[selbox.options.length] = new Option(selArr2[0],selArr2[1]);
}
}
}
function setJOptions(chosen) {
testIt="";
var selbox = document.form1.field6;
selbox.options.length = 0;
if (chosen == "0") {
selbox.options[selbox.options.length] = new Option('Choose One',' ');
}
if (chosen != "0") {
eval('selArr=arr'+(parseInt(chosen)));
selbox.options[selbox.options.length] = new Option('Choose One','0');
for (var i = 1;i < selArr.length;i++){
selArr2=selArr[i].split(",");
testIt +=selArr2[0]+' - '+selArr2[1]+'\n';
selbox.options[selbox.options.length] = new Option(selArr2[0],selArr2[1]);
}
}
}
</SCRIPT>

Hi, no replies and I am still struggling to make this work myself.

I'll try and explain the problem again, maybe my first attempt was poorly written and confusing.

I have three dropdowns in my form like this:


<select name="field4" onchange="setOptions(document.form1.field4.options[document.form1.field4.selectedIndex].value);">

<select name="field5" onchange="setJOptions(document.form1.field5.options[document.form1.field5.selectedIndex].value);">

<select name="field6">


On the first drop field4 I call setOptions and on the second field5 I call setJOptions (slightly different name)

How can I make setOptions reset the third dropdown (field6) to contain just "Choose one" whenever field4 is changed?

Here is my abbreviated code for setOptions


<SCRIPT LANGUAGE = "JAVASCRIPT">
var emptyOption=('Choose One,0')
var arr1=new Array('','Accountancy,31','Banking,30');
var arr6=new Array('','Teaching,29','Lecturing,28');
var selArr=new Array();
var selArr2=new Array();
var testIt;
function setOptions(chosen) {
testIt="";
var selbox = document.form1.field5;
selbox.options.length = 0;
if (chosen == "0") {
selbox.options[selbox.options.length] = new Option('Choose One',' ');
}
if (chosen != "0") {
eval('selArr=arr'+(parseInt(chosen)));
selbox.options[selbox.options.length] = new Option('Choose One','0');
for (var i = 1;i < selArr.length;i++){
selArr2=selArr[i].split(",");
testIt +=selArr2[0]+' - '+selArr2[1]+'\n';
selbox.options[selbox.options.length] = new Option(selArr2[0],selArr2[1]);
}
}
}
</SCRIPT>


Thanks in advance, I hope this makes it easier to understand what I am trying to do!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<script type="text/javascript">

var categories = [];
categories["startList"] = ["Apparel","Books"]
categories["Apparel"] = ["Men","Women"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
categories["Men"] = ["Shirts","Ties","Belts"];
categories["Women"] = ["Blouses","Skirts","Scarves"];
categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science","Romance"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];

var nLists = 3; // number of lists in the set

function fillSelect(currCat,currList){

var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++)
{
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat)
{
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(isValue){

alert(isValue);
}


function init(){

fillSelect('startList',document.forms[0]['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>
<body>
<form action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List3' onchange="getValue(this.value)">
<option selected >Make a selection</option>
</select>
</form>
</body>
</html>