javacript drop down boxes - populating one dependent on value of the other

adamhw · June 15th, 2010, 08:14 AM

Hi there

I've got 2 drop down boxes - I need the second one to populate depending on the choice the user makes in the first one - I found this tutorial online and it's working.....mostly...but when I select 'United States' the alert returns the states that will be populated by the drop down which is fine -

then when I select the 'United Kingdom' the alert again returns the counties that will be populated by the drop down.....correct - HOWEVER, the drop down has an additional 'county' in it called Florida.

This kind of thing happens if you select either 3 or 4 from the first drop down.

Here's my test page code, any help greatly appreciated:

<html>
<head>
<title>Select Populate Test</title>

<script>
var UnitedStates = new Array();
UnitedStates[0] = "Texas";
UnitedStates[1] = "California";
UnitedStates[2] = "Arizona";
UnitedStates[3] = "Nevada";
UnitedStates[4] = "Florida";

var UnitedKingdom = new Array();
UnitedKingdom[0] = "Surrey";
UnitedKingdom[1] = "Kent";
UnitedKingdom[2] = "Dorset";
UnitedKingdom[3] = "Hampshire";

var three = new Array();
three[0] = "zero";
three[1] = "one";
three[2] = "two";
three[3] = "three";

var four = new Array();
four[0] = "zero";
four[1] = "one";
four[2] = "two";
four[3] = "three";
four[4] = "four";

function populateDropdown(arry)
{
alert("populateDropdown");
alert("arry= " + arry);

for (var i = 0; i < arry.length; i++)
{
document.myForm.stateSelect.options[i] = new Option(arry[i], arry[i]);
}
}

function updateDropdown()
{
var stateArray
var selectedCountry;
var countryDropdown = document.myForm.countrySelect;

for (var i = 0; i < countryDropdown.options.length; i++)
{
if (countryDropdown.options[i].selected)
{
selectedCountry = countryDropdown.options[i].value;
}
}

if (selectedCountry == 1)
{
stateArray = UnitedStates;
populateDropdown(stateArray);
}

if (selectedCountry == 2)
{
stateArray = UnitedKingdom;
populateDropdown(stateArray);
}

if (selectedCountry == 3)
{
stateArray = three;
populateDropdown(stateArray);
}

if (selectedCountry == 4)
{
stateArray = four;
populateDropdown(stateArray);
}

}
</script>
</head>

<body onLoad="populateDropdown(three);">
<form name="myForm">
<select name="countrySelect" onChange="updateDropdown();">
<option value="1">United States</option>
<option value="2">United Kingdom</option>
<option value="3">3</option>
<option value="4">4</option>

</select>

<select name="stateSelect">
</select>
</form>
</body>
</html>

thanks

Adam

joefawcett · June 15th, 2010, 09:18 AM

You need to clear the second dropdown before re-populating.

Code:

document.myForm.stateSelect.options.length = 0;

should do it.

adamhw · June 15th, 2010, 09:26 AM

Thanks Joe

Where abouts in the code should this go? I've tried it in a couple of places but no luck.

thanks

Adam

I see you're based in Exeter, have you heard of Crediton?

joefawcett · June 15th, 2010, 09:41 AM

The first line of populateDropdown function.

adamhw · June 18th, 2010, 08:19 AM

Joe

As an addition to this I've got 2 forms working on the same registration page - one of them being this drop down populate and the other one being the principal form that is collecting the registration data of the individual.

Now I can't have one form within another one as this won't work so what I need to do (I've been told) is put a couple of hidden variables in the 2nd form (the populate one), then onsubmit set the values of the hidden vars according to other form values.

The only thing is I'm not sure how to do this; this is my code for the populate form objects:

<form name="wk_frm" id="wk_frm">
<dd>
<select name="txt1" id="txt1" class="textboxdrop" style="width:120px;" onChange="updateDropdown();">
<option value="" selected="selected">Select Choice</option>
<option value="< 1">< 1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="7+">7+</option>
</select>

</dd>
<div id="buffer"></div>
<dt>
<label class="register">question 2?:</label>
</dt>

<dd>
<select name="txtAmount" id="txtAmount" class="textboxdrop" style="width:120px;">

</select>

</dd>
</form>

Where do I put this form if I can't put it within the other form and where do i put the hidden variables and the onsubmit function?

thanks

Adam

joefawcett · June 18th, 2010, 08:28 AM

Not sure why you need two forms, why not just put the two drop downs within the registration form?

adamhw · June 18th, 2010, 08:51 AM

doesn't seem to work with out having 2 form elements:

this is the whole form and javascript:

<script language="javascript">

var lessthanone = new Array();
lessthanone[0] = "< 1";

var one = new Array();
one[0] = "< 1";
one[1] = "1";

var two = new Array();
two[0] = "< 1";
two[1] = "1";
two[2] = "2";

var three = new Array();
three[0] = "< 1";
three[1] = "1";
three[2] = "2";
three[3] = "3";

var four = new Array();
four[0] = "< 1";
four[1] = "1";
four[2] = "2";
four[3] = "3";
four[4] = "4";

var five = new Array();
five[0] = "< 1";
five[1] = "1";
five[2] = "2";
five[3] = "3";
five[4] = "4";
five[5] = "5";

var six = new Array();
six[0] = "< 1";
six[1] = "1";
six[2] = "2";
six[3] = "3";
six[4] = "4";
six[5] = "5";
six[6] = "6";

var seven = new Array();
seven[0] = "< 1";
seven[1] = "1";
seven[2] = "2";
seven[3] = "3";
seven[4] = "4";
seven[5] = "5";
seven[6] = "6";
seven[7] = "7";

var sevenplus = new Array();
sevenplus[0] = "< 1";
sevenplus[1] = "1";
sevenplus[2] = "2";
sevenplus[3] = "3";
sevenplus[4] = "4";
sevenplus[5] = "5";
sevenplus[6] = "6";
sevenplus[7] = "7";
sevenplus

= "7 +";

function populateDropdown(arry)
{
//alert("populateDropdown");
//alert("arry= " + arry);

document.wk_frm.txtQuestion2.options.length = 0;

for (var i = 0; i < arry.length; i++)
{
document.wk_frm.txtQuestion2.options[i] = new Option(arry[i], arry[i]);

}
}

function updateDropdown()
{
var bsArray
var selectedChoice;
var selectedDropdown = document.wk_frm.txtWorkout;

for (var i = 0; i < selectedDropdown.options.length; i++)
{
if (selectedDropdown.options[i].selected)
{
selectedChoice = selectedDropdown.options[i].value;
}
}

if (selectedChoice == 1)
{
bsArray = one;
populateDropdown(bsArray);
}

if (selectedChoice == 2)
{
bsArray = two;
populateDropdown(bsArray);
}

if (selectedChoice == 3)
{
bsArray = three;
populateDropdown(bsArray);
}

if (selectedChoice == 4)
{
bsArray = four;
populateDropdown(bsArray);
}

if (selectedChoice == 5)
{
bsArray = five;
populateDropdown(bsArray);
}

if (selectedChoice == 6)
{
bsArray = six;
populateDropdown(bsArray);
}

if (selectedChoice == 7)
{
bsArray = seven;
populateDropdown(bsArray);
}

if (selectedChoice == 8)
{
bsArray = lessthanone;
populateDropdown(bsArray);
}

if (selectedChoice == 9)
{
bsArray = sevenplus;
populateDropdown(bsArray);
}

}

</script>

<span class="spanb">
<form action="register.asp" method="POST" name="login_frm" id="login_frm" onSubmit="return ValideRegisterForm(this);">
<fieldset style="width:98%; ">
<p>* denotes mandatory field</p>
<legend>Create an account</legend>
<dt>
<label class="register">First Name: *</label>
</dt>
<dd>
<input name="txtFirstname" type="text" class="textbox" id="txtFirstname" maxlength="100" />
</dd>
<div id="buffer"></div>
<dt>
<label class="register">Surname: *</label>
</dt>
<dd>
<input name="txtSurname" type="text" class="textbox" id="txtSurname" maxlength="100" />
</dd>
<div id="buffer"></div>
<dt>
<label class="register">First line of address: *</label>
</dt>
<dd>
<input name="txtAddress1" type="text" class="textbox" id="txtAddress1" maxlength="50" />
</dd>
<div id="buffer"></div>
<dt>
<label class="register"> </label>
</dt>
<dd>
<input name="txtAddress2" type="text" class="textbox" id="txtAddress2" maxlength="50" />
</dd>
<div id="buffer"></div>
<dt>
<label class="register"> </label>
</dt>
<dd>
<input name="txtAddress3" type="text" class="textbox" id="txtAddress3" maxlength="50" />
</dd>
<div id="buffer"></div>
<dt>
<label class="register">Town: *</label>
</dt>
<dd>
<input name="txtAddress4" type="text" class="textbox" id="txtAddress4" maxlength="50" />
</dd>
<div id="buffer"></div>
<dt>
<label class="register">Primary Contact Number: *</label>
</dt>
<dd>
<input name="txtTel" type="text" class="textbox" id="txtTel" maxlength="50" style="width:120px;" />
</dd>
<div id="buffer"></div>
<dt>
<label class="register">Email:*</label>
</dt>
<dd>
<input name="txtEmail" type="text" class="textbox" id="txtEmail" maxlength="50" />
</dd>
<div id="buffer"></div>
<dt>
<label class="register">question 1?:</label>
</dt>
<form name="wk_frm" id="wk_frm">
<dd>
<select name="txt1" id="txt1" class="textboxdrop" style="width:120px;" onChange="updateDropdown();">
<option value="" selected="selected">Select Choice</option>
<option value="< 1">< 1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="7+">7+</option>
</select>

</dd>
<div id="buffer"></div>
<dt>
<label class="register">Question 2?:</label>
</dt>

<dd>
<select name="txt2" id="txt2" class="textboxdrop" style="width:120px;">

</select>

</dd>
</form>
<div id="buffer"></div>
<dd>
<input name="btnSubmit" type="submit" value="Register" class="button" style="margin-left:5px; width:80px; " />
</dd>
</fieldset>
</form>

</span>

thanks

Adam

joefawcett · June 18th, 2010, 09:11 AM

Well if it doesn't work you need to say what happens and any error messages. The code you just posted had two nested forms. I suggested you put the two drop downs inside the main form and change the references to wk_frm to reflect this.

Also you started out with drop downs that had state and city data, the latest version is just stuff that doesn't need arrays to hold it, it could just be calculated.

joefawcett · June 18th, 2010, 09:54 AM

This is how I'd have coded it:

Code:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Linked Dropdowns</title>
<scripttype="text/javascript">
//List data
var countryData = [
{country: "USA", areas: ["Texas", "California", "Arizona"]}, //Default country to show
{country: "UK", areas: ["Devon", "Staffordshire", "London"]}
]
function populateCountries()
{
var oList = getCountriesDropdown();
oList.options.length = 0;
for (var i = 0, l = countryData.length; i < l; i++)
{
var sText = countryData[i].country;
addOptionToList(oList, sText, sText);
}
}
function showAreas(country)
{
var oList = getAreasDropdown();
oList.options.length = 0;
var colAreas = getAreasForCountry(country)
if (colAreas)
{
for (var i = 0, l = colAreas.length; i < l; i++)
{
var sArea = colAreas[i];
addOptionToList(oList, sArea, sArea);
}
}
}
function getAreasForCountry(country)
{
for (var i = 0, l = countryData.length; i < l; i++)
{
if (countryData[i].country == country)
{
return countryData[i].areas;
}
}
returnnull;
}
function getCountriesDropdown()
{
return document.getElementById("lstCountries");
}
function getAreasDropdown()
{
return document.getElementById("lstAreas");
}
function addOptionToList(parent, value, text)
{
var oOption = new Option(text, value);
parent.options.add(oOption);
}
function init()
{
populateCountries();
var sCountry = getCountriesDropdown().options[0].value
showAreas(sCountry);
}
</script>
</head>
<bodyonload="init()">
<formaction="">
<ul>
<li>
<labelfor="txtName">
Name:</label><inputname="txtName"id="txtName"type="text"/></li>
<li>
<labelfor="txtEmail">
Email:</label><inputname="txtEmail"id="TtxtEmail"type="text"/></li>
<li>
<labelfor="lstCountries">
Country:</label><selectid="lstCountries"name="lstCountries"style="width: 150px;"onchange="showAreas(this.options[this.options.selectedIndex].value);">
</select></li>
<li>
<labelfor="lstAreas"> 
Area:</label><selectname="lstAreas"id="lstAreas"style="width: 150px;"></select></li>
</ul>
</form>
</body>
</html>

adamhw · June 18th, 2010, 09:57 AM

Perfect, thanks Joe