Using Javascript to Dynamically Populate Select Lists [Archive]

JohnDubya

02-11-2007, 01:41 AM

I was looking around for a way for my users to select an option from one select box, and depending on what option they chose, it would fill the second select box with certain options. I tried one script first, but it was worthless and cluttered. I finally googled for dynamically created select boxes, and I found a script that is very, very easy to customize and use...especially if you're wanting to put the options in via PHP, like I did with this script. Hope this helps someone!

http://www.petenelson.com/aspwatch/ASPWatch%20%20Using%20Javascript%20to%20Dynamically%20Populate%20Select%20Lists.htm

Here's the code:

<script language="Javascript">

</script>

<form name="frmMain">

<select name="Sports" onChange="PopulateTeams();" size="4">
<option>Choose a Sport</option>
<option value="1">Baseball</option>
<option value="2">Football</option>
<option value="3">Basketball</option>
</select>

<select name="Teams" size="3">
<option> </option>
</select>

</form>

BarrMan

02-11-2007, 07:01 AM

Try this:
<html>
<head>
<script type="text/javascript">
function popSecond()
{
var secBox,second,objvalue;
var obj = document.all.first;
objvalue = obj.options[obj.selectedIndex].value;
if(objvalue)
{
if(objvalue == "1")
secBox = "First,Second,Third,Fourth,Fifth,Sixth";
if(objvalue == "2")
secBox = "Something,Else,In,Here";
if(objvalue == "3")
secBox = "This,Is,The,Third,Box";
secBox = secBox.split(",");
second = '<select name="second">';
for(var i=0;i<secBox.length;i++)
second += "<option>" + secBox[i] + "</option>"
second += "</select>";
document.getElementById("second").innerHTML = second;
}
}
</script>
</head>
<body>
<select name="first" onChange="popSecond()">
<option value="">Select one option</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<div id="second">
</div>
</body>
</html>