HELP reg:: Dynamic Dependant Dropdown

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 397,810 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,515 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 2348 | Replies: 0

•

Join Date: Dec 2006

Posts: 1

Reputation: kaniths is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

kaniths

Offline

Newbie Poster

HELP reg:: Dynamic Dependant Dropdown

Dec 20th, 2006

hey frends..
i have to create a asp page with 2 select pulldowns(state,city),options to b displayed in the CITY depends on STATE choice.

the option list is to retrived from a db dynamically.

i have a table with fields--state,stateID,city,cityID.

here is the code snippet i have..

 Help with Code Tags 
 asp Syntax (Toggle Plain Text) 
 
<html>
<head>
<title>testpage</title>
<script language=javascript >
var States = new Array();
var Cities = new Array();
 
function addState(state) {
 
    v = States.length;
   States.length ++;
   States[v] = state;
   v = Cities.length;
   Cities.length ++;
   Cities[state] = new Array();
}
 
function addCity(state,city) {
      v = Cities[state].length;
 
    Cities[state].length ++;
 
    Cities[state][v] = city;
}
 
function loadStateList() {
 
    var ctrlState = document.frmAddress.State;
    ctrlState.options.length = 0;
    for (i=0;i<States.length;i++) {
    ctrlState.options[i] = new Option(States[i],States[i]);
    }
}
 
function loadCityList() {
 
    var ctrlState = document.frmAddress.State;
    var selState = ctrlState.options[ctrlState.selectedIndex].value;
 
    var ctrlCity = document.frmAddress.City;
    ctrlCity.options.length = 0;
 
    for (i=0;i<Cities[selState].length;i++) {
        ctrlCity.options[i] = new Option(Cities[selState][i]);
    }
}
</script>
 
</head>
<body onload="loadStateList();loadCityList();">
 
<%
' Open Database and setup a recordset with States Listed.
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 rs.eof then
    response.write("No Addresses Found")
    rs.close
    set rs=nothing
    response.end
end if
 
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
%>
 
 
<form name="frmAddress" method="POST" action="">
    <table>
        <tr>
            <td>STATE ID:</td>
            <td><input type=text hidden="true" name="text1" /></td>
        </tr>
        <tr>
            <td>CITY ID</td>
            <td><input type=text hidden="true" name="text2" /></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>
        </table>
    <p>
    <input type="submit" value="Submit" name="save" />
    <input type="reset" value="Reset" name="clear" />
    </p>
</form>
</body>
</html>
<html>
<head>
<title>testpage</title>
<script language=javascript >
var States = new Array();
var Cities = new Array();

function addState(state) {
   
    v = States.length;
   States.length ++;
   States[v] = state;
   v = Cities.length;
   Cities.length ++;
   Cities[state] = new Array();
}

function addCity(state,city) {
      v = Cities[state].length;
  
    Cities[state].length ++;
  
    Cities[state][v] = city;
}

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

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

</head>
<body onload="loadStateList();loadCityList();">

<%
' Open Database and setup a recordset with States Listed.
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 rs.eof then
    response.write("No Addresses Found")
    rs.close
    set rs=nothing
    response.end
end if

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
%>


<form name="frmAddress" method="POST" action="">
    <table>
        <tr>
            <td>STATE ID:</td>
            <td><input type=text hidden="true" name="text1" /></td>
        </tr>
        <tr>
            <td>CITY ID</td>
            <td><input type=text hidden="true" name="text2" /></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>
        </table>
    <p>
    <input type="submit" value="Submit" name="save" />
    <input type="reset" value="Reset" name="clear" />
    </p>
</form>
</body>
</html>

NOW..how can i modify the code,so that wen the option is selected in the STATE & CITY lists,simulteneously the stateID,cityID are filled in 2 hidden textboxes,Text1 & Text2..

kindly help..
thanks..

regards,
kanith