dependant list boxes

[Christina]

Hi,

I've been looking at some code for dependent list boxes to adapt to a State
and City list. There will only be 2 states for the first list box, and 3
cities in the second list box. When the state is selected, the relative
cities appear in the second box.

I found a nice set of code online that was derived from Dreamweaver code and
have altered it to simplify for my minimal needs. I have learned a lot of
coding from looking at things and breaking it down and I understand most of
this. What I don't understand here is how all of the arrays are being
populated. In some cases it looks like a variable for an array exists, but
I don't see where it originated - specifically arrDL. Can someone look at
this code and help with some additional comments as to what is actually
occurring?

The Javascript:

<script type="text/JavaScript">
var stateList = new Array();
var cityList = new Array();

cityList[1] = "listState"; // Name of parent list box
cityList[2] = "listForm"; // Name of form containing parent list box
cityList[3] = "listCity"; // Name of child list box
cityList[4] = "listForm"; // Name of form containing child list box
cityList[5] = stateList; // No need to do anything here

stateList[0] = "OR"
stateList[1] = "Salem"
stateList[2] = "Salem"

stateList[3] = "OR"
stateList[4] = "Bend"
stateList[5] = "Bend"

stateList[6] = "OR"
stateList[7] = "Portland"
stateList[8] = "Portland"

stateList[9] = "WA"
stateList[10] = "Seattle"
stateList[11] = "Seattle"

stateList[12] = "WA"
stateList[13] = "Spokane"
stateList[14] = "Spokane"

stateList[15] = "WA"
stateList[16] = "Vancouver"
stateList[17] = "Vancouver"


// End of object/array definitions, beginning of generic functions

function setCityList(arrDL){

var olistState = document.forms[arrDL[2]].elements[arrDL[1]];
var olistCity = document.forms[arrDL[4]].elements[arrDL[3]];
var arrList = arrDL[5];

clearDynaList(olistCity);

if (olistState.selectedIndex == -1){
olistState.selectedIndex = 0;
}

populateDynaList(olistCity, olistState[olistState.selectedIndex].value,
arrList);
return true;
}

function clearDynaList(oList){

for (var i = oList.options.length; i >= 0; i--){
oList.options = null;
}

oList.selectedIndex = -1;
}

function populateDynaList(oList, nIndex, aArray){
for (var i = 0; i < aArray.length; i= i + 3){
if (aArray == nIndex){
oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i
+ 2]);
}
//oList.size=oList.length //You need to comment out this line of the
function if you use this mod
}

oList.selectedIndex = 0;
}

</script>

html:
<form name="listForm">
<table width="500" border="0" cellspacing="0" cellpadding="5">
<tr>
<th width="50%">Parent List Menu</th>
<th width="50%">Child List Menu</th>
</tr>
<tr>
<td align="center" valign="top">
<select name="listState" size="2" onchange="setCityList(cityList)">
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</select>
</td>
<td align="left" valign="top">
<p>
<select name="listCity" size="3">
</select>
</p>

</td>
</tr>
</table>
</form>

Thanks,
Christina

 

[Christina]

Hi,

I've been looking at some code for dependent list boxes to adapt to a
State and City list. There will only be 2 states for the first list box,
and 3 cities in the second list box. When the state is selected, the
relative cities appear in the second box.

I found a nice set of code online that was derived from Dreamweaver code
and have altered it to simplify for my minimal needs. I have learned a
lot of coding from looking at things and breaking it down and I understand
most of this. What I don't understand here is how all of the arrays are
being populated.

I've gone through the code and tested and made changes to some of the
variable names and discovered that often one 'new' variable name actually
refers to the previous variable name, so I changed them to reflect this. I
combined the functions into one function and commented as much as I could to
track what was happening and it works fine.

Now I need to take a checked radio button that selects a state and make it
select the corresponding state in the list box, thereby also filling the
city list box. This is for a class, and although it seems redundant, it's
what the instructor wants. He hasn't provided any guidelines or instructions
on how to do this, so I am asking the experts here. Also, note that he wants
the City list to be disabled on load, then enabled when a state selection is
made through the list or radio buttons. I don't know why - the city list is
supposed to be empty until a state is selected - so who's going to know if
it's disabled or not? I have pulled the value of the radio button out with
a loop. Now I need to match that value to the list box value so it can be
automatically selected.

This is the revised js code:

<script type="text/JavaScript">
var listValues = new Array(); //array to hold all values
var selectElem = new Array(); //array to hold each value

selectElem[1] = "State"; // Name of parent list box
selectElem[2] = "listForm"; // Name of form containing parent list box
selectElem[3] = "City"; // Name of child list box
selectElem[4] = "listForm"; // Name of form containing child list box
selectElem[5] = listValues; // 5th element is full array of values

listValues[0] = "OR" //value of state in state list
listValues[1] = "Salem" //text of city in city list
listValues[2] = "SAL" //value of city in city list

listValues[3] = "OR"
listValues[4] = "Bend"
listValues[5] = "BEN"

listValues[6] = "OR"
listValues[7] = "Portland"
listValues[8] = "PDX"

listValues[9] = "WA"
listValues[10] = "Seattle"
listValues[11] = "SEA"

listValues[12] = "WA"
listValues[13] = "Spokane"
listValues[14] = "SPK"

listValues[15] = "WA"
listValues[16] = "Vancouver"
listValues[17] = "VAN"

function activate()
{
document.listForm.City.disabled=false;
for (i=0;i<document.listForm.radState.length;i++)
{
if (document.listForm.radState.checked)
{
radSelect = document.listForm.radState.value;
}
}
}

function setCity(selectElem){ //put the values in the city list

var listState = document.forms[selectElem[2]].elements[selectElem[1]];
//assign state list array elements to variable
var listCity = document.forms[selectElem[4]].elements[selectElem[3]];
//assign city list array elements to variable
var fullList = selectElem[5]; //assign variable to full list array

//clear list
for (var i = listCity.options.length; i >= 0; i--){
listCity.options = null;
}

listCity.selectedIndex = -1;

//populate list
var selectedState = listState[listState.selectedIndex].value;

for (var i = 0; i < fullList.length; i= i + 3){
if (fullList == selectedState){
listCity.options[listCity.options.length] = new Option(fullList[i + 1],
fullList[i + 2]);
}
document.listForm.City.disabled=false;

}

return true;
}


</script>

and the revised form:

<form name="listForm">
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td><input type="radio" name="radState" value="OR"
onClick="activate()" />
<label>Oregon</label>
</td>
<td><input type="radio" name="radState" value="WA"
onClick="activate()" />
<label> Washington</label>
</input>
</td>
</tr>
<tr>
<td align="center" valign="top">
<select name="State" size="2" onchange="setCity(selectElem)">
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</select>
</td>
<td align="left" valign="top">
<p>
<select name="City" size="3" disabled="true">
</select>
</p>
</td>
</tr>
</table>
</form>

Thanks to anybody who give me a direction to go with this.

Christina