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;
    }
}

Tagged as: client-side, Dynamically, Javascript, menus, Populating, Select, with