Dynamically Populating Select Menus Client-Side With JavaScript
This JavaScript function will enable your web application to populate a drop-down menu of items on the fly, based on the selection of another list, without reloading the page. I also provide the code to build the arrays by loading them from a database with ASP and PHP.
The ASP code builds JavaScript array of all possible items that could be populated into the second menu. For each item in the array, it indicates the item in the first menu with which it is associated. So then when the user selects an item in the first list, the function takes the selected value, iterates through the array to find only those items associated with the selected value, and loads them into the second menu.
Here's the HTML code of the form with the two drop down lists. I've hard-coded the first menu, but you can also store and load those values from a database, based on the code I'm going to provide:
<form name="form1">
<select name="types" onChange="fillItems(0)">
<option value="32">Laptops</option>
<option value="21">PDAs</option>
</select>
<select name="items"></select>
</form>
Here's the ASP code to build the array of possible menu items:
<script language="JavaScript">
var arItems = new Array()
arItems = [
<%
strSQL = "SELECT type_id, id, description FROM items"
objRS.Open strSQL, strConn
arItems = objRS.GetRows()
objRS.Close()
for i = 0 to uBound( atItems, 2 )
response.Write( "[" & atItems( 0, i ) & "," & atItems( 1, i ) & ",'" & atItems( 2, i ) & "']" )
if i < uBound( atItems, 2 ) then response.Write("," & vbCrLf )
next
%>
]
Here's the PHP code to build the array of possible menu items:
var arItems = new Array()
arItems = [
<?php
include_once("connection.php");
$query = "SELECT type_id, id, description FROM items";
$result = mysql_query($query);
$num_rows = mysql_num_rows( $result );
$i = 1;
while ($row_result = mysql_fetch_row($result)) {
echo "['".$row_result[0]."', '".$row_result[1]."', '".$row_result[2]."']";
if ( $i < $num_rows )
echo ",
";
$i++;
}
?>
]
This will produce a JavaScript array that looks like this:
arItems = [
[ 32, 234, 'Toshiba Laptops'],
[ 32, 156, 'Compaq Laptops'],
[ 32, 333, 'Sony Laptops'],
[ 21, 656, 'IBM PDAs'],
[ 21, 467, 'Palm PDAs']
]
And finally, here's the JavaScript function used to populate the second menu:
function fillItems(intStart) {
var fTypes = document.form1.types;
var fItems = document.form1.items;
var a = arItems;
var b, c, d, intItem, intType
if ( intStart > 0 ) {
for ( b = 0; b < a.length; b++ ) {
if ( a[b][1] == intStart )
intType = a[b][0];
}
for ( c = 0; c < fTypes.length; c++ ) {
if ( fTypes.options[ c ].value == intType )
fTypes.selectedIndex = c;
}
}
if ( intType == null )
intType = fTypes.options[ fTypes.selectedIndex ].value;
fItems.options.length = 0;
for ( d = 0; d < a.length; d++ ) {
if ( a[d][0] == intType )
fItems.options[ fItems.options.length ] = new Option( a[d][2], a[d][1] );
if ( a[d][1] == intStart )
fItems.selectedIndex = fItems.options.length - 1;
}
}
on May 10th, 2006 at 7:01 pm
Hi,
I am testing this code for three dependent menu levels, however, it does not populate the third menu. Could you please, tell me what is wrong in my code:
Untitled Document
function fillItems(intStart) {
var fTypes = document.form1.state;
var fItems = document.form1.county;
var a = arItems;
var b, c, d, intItem, intType
if ( intStart > 0 ) {
for ( b = 0; b
]
function fillcity(intStart) {
var fTypes2 = document.form1.county;
var fItems2 = document.form1.city;
var a = arItems2;
var b, c, d, intItem, intType
if ( intStart > 0 ) {
for ( b = 0; b
]
NSW
QLD
VIC
Choose District
Choose Suburb
Thank you,
Andrew
on May 11th, 2006 at 11:12 am
for starters, you're closing your for loops with square brackets instead of curly brackets…
on December 9th, 2006 at 7:29 am
I want select division then related district come and when select district the ralated post code come in a different list menu. Please help me to solve this php code..
Untitled Document
">
">
function fillItems(intStart) {
var fTypes = document.form1.state;
var fItems = document.form1.county;
var a = arItems;
var b, c, d, intItem, intType
if ( intStart > 0 ) {
for ( b = 0; b
}
function fillcity(intStart) {
var fTypes2 = document.form1.county;
var fItems2 = document.form1.city;
var a = arItems2;
var b, c, d, intItem, intType
if ( intStart > 0 ) {
for ( b = 0; b
}
on December 9th, 2006 at 7:31 am
">
">
function fillItems(intStart) {
var fTypes = document.form1.state;
var fItems = document.form1.county;
var a = arItems;
var b, c, d, intItem, intType
if ( intStart > 0 ) {
for ( b = 0; b
}
function fillcity(intStart) {
var fTypes2 = document.form1.county;
var fItems2 = document.form1.city;
var a = arItems2;
var b, c, d, intItem, intType
if ( intStart > 0 ) {
for ( b = 0; b
}
on June 8th, 2007 at 3:04 pm
I dont understand how to put this all together, is it in one html document? or all seperatly for instance. php code saved in as php html speerate? I very much a beginer, can some one explain how you would get this working? – sam thanks
on June 8th, 2007 at 3:10 pm
well, the code to pull the data from a database and populate the javascript array would need to be done with PHP, whether in that file or a separate one. Then the javascript would be onpage
If you're very much a beginner, this might be a little beyond you right now. I encourage you to keep coding!
on July 14th, 2007 at 1:20 am
You REALLY need to fix the stylesheet for the code sections… I can't see white text on a white background unless I highlight it!
Cheers!
on October 31st, 2008 at 12:09 pm
Very legibile. Is it a coloring competition?
on April 20th, 2009 at 10:02 am
Hi,
I have been trying to use Spry to do this for a couple of days. I found your script and within 10 minutes I had it populating both dropdown lists from my database and working spot on. Great script. Thanks