New Page 1

<html>
<head>
<title>Multiple Dynamic Drop Down Boxes - Javascript</title>
<script language=javascript >
var States = new Array(); // Array of all states in database
var Cities = new Array(); // Array of Arrays - One array for each state, each array holds the city names for that state

function addState(state) {
    // Determine current length of the States Array
    v = States.length;
    // increase the size of the States array by 1
    States.length ++;
    // Store the new state information into the array (note using the old length because arrays start at 0
    States[v] = state;
    // Determine the size of the Cities array
    v = Cities.length;
    // increase the size of the Cities array by 1
    Cities.length ++;
    // create a new array in the Cities array for the new state
    Cities[state] = new Array();
}

function addCity(state,city) {
    // Determine the current length of the City[state] array.
    // that is the sub array of Cities for the specified state
    v = Cities[state].length;
    // Increase the size of the City[state] array by 1.
    Cities[state].length ++;
    // Add the new city to the array
    Cities[state][v] = city;
}

function loadStateList() {
    // Clear the State options
    var ctrlState = document.frmAddress.State;
    ctrlState.options.length = 0;
    // Load the State options
    for (i=0;i<States.length;i++) {
        ctrlState.options[i] = new Option(States[i],States[i]);
    }
}

function loadCityList() {
    // Determine the Selected State
    var ctrlState = document.frmAddress.State;
    var selState = ctrlState.options[ctrlState.selectedIndex].value;
    // Clear the City Options
   var ctrlCity = document.frmAddress.City;
    ctrlCity.options.length = 0;
    // Load the City Options
    for (i=0;i<Cities[selState].length;i++) {
        ctrlCity.options[i] = new Option(Cities[selState][i]);
    }
}
</script>

</head>
<body onload="loadStateList();loadCityList();">
<h2>Dynamically Linked Drop-Down Boxes - JavaScript</h2>
<%
' Open Database and setup a recordset with States Listed.
' Note the Distinct option in the SQL statement. This will limit each state to showing only once in the recordset.
set conn = server.createobject("ADODB.Connection")
Conn.open("driver={SQL Server};server=xxxxxxx;uid=xxxxxxx;pwd=xxxxxxx;database=xxxxxxx;network=dbmssocn")
strSQL = "Select State, city from tbAddress Order by State,city"
set rs = conn.execute(strSQL)
' If there are no records found, display a message. Otherwise display our form.
if rs.eof then
    response.write("No Addresses Found")
    rs.close
    set rs=nothing
    response.end
end if
' Here is where we load up the javascript arrays:
' If the state not the same as the previous record then add it to the
' states array and create a new array to hold the cities for the new state
' then add the city to the new state array
' if the state is the same as the previous record, then check to see if the
' city is the same as the previous record. If not then add it to the array
' for the correct state.
strState = ""
strCity = ""
do until rs.eof
    if not rs("State") = strState then
        response.write("<script>addState('" & rs("State") & "')</script>")
        response.write("<script>addCity('" & rs("State") & "','" & rs("City") & "')</script>")
        strState = rs("State")
        strCity = rs("City")
    else
        if not rs("City") = strCity then
            response.write("<script>addCity('" & rs("State") & "','" & rs("City") & "')</script>")
            strCity = rs("City")
        end if
    end if
    rs.MoveNext
loop
rs.close
set rs=nothing
' OK so now our arrays are all created
' Lets actually put the information on the screen.
%>
<form name="frmAddress" method="POST" action="">
    <table>
        <tr>
            <td>Name:</td>
            <td><input type=text name="fullName" /></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><input type=text name="address" /></td>
        </tr>
        <tr>
            <td>State</td>
            <td>
                
                <select size="1" name="State" onChange="loadCityList();">
                </select>
            </td>
        </tr>
        <tr>
            <td>City</td>
            <td>
                <select size="1" name="City">
                </select>
            </td>
        </tr>
        <tr>
            <td>Phone</td>
            <td><input type=text name="Phone" /></td>
        </tr>
    </table>
    <p>
    <input type="submit" value="Submit" name="B1" />
    <input type="reset" value="Reset" name="B2" />
    </p>
</form>
</body>
</html>