两个下拉框联动的问题

[tom800]

我的问题：在一个页面里有两个下拉框，第一个为省份，第二个为城市，当选择省份时，第二个下拉框里就列出相应的城市。

我知道这个问题在CSDN里有很多，我也查了，但是我觉得都做的不是很合理

我的要求：省份和城市从Access数据库中提取；
不要刷新页面的那种代码；
　　　　　代码最好简单明了在一个页面中用javascript来处理；
　　　　　最好能用标注说明一下

[liuqinyi]

给你看看我做的
http://www.xzss.com/liuqinyi/corp_card/reg5.asp

[gucs]

<script language="JavaScript">
<!--
var arrGroup = new Array()

arrGroup[0] = new Array(3)
arrGroup[0][0] = 1
arrGroup[0][1] = 3
arrGroup[0][2] = '开发一组'

arrGroup[1] = new Array(3)
arrGroup[1][0] = 1
arrGroup[1][1] = 4
arrGroup[1][2] = '开发二组'

arrGroup[2] = new Array(3)
arrGroup[2][0] = 2
arrGroup[2][1] = 5
arrGroup[2][2] = '网络一组'


//-->
</script>
<script language="JavaScript">
<!--
function ShowSub(lngDepID)
{
var i, j

form1.selGrp.length = 0

for (i=0, j=0; i<arrGroup.length; i++) {
if (arrGroup[i][0] == lngDepID) {
form1.selGrp.options[j] = new Option(arrGroup[i][2])
form1.selGrp.options[j].value = arrGroup[i][1]
j++
} // if
} // for
}
//-->
</script>


<tr>
<td width="30%" align="right" class="BGGray">所在部门：</td>
<td><select name="selDep" size="1" id="selDep" onchange="ShowSub(this.value)">

<option value="1">开发部</option>

<option value="2">网络部</option>

</select></td>
</tr>
<tr>
<td width="30%" align="right" class="BGGray">所在组：</td>
<td><select name="selGrp" size="1" id="selGrp">
<option value="">{GRP_NAME}</option>
</select></td>
</tr>

[vulcan]

<form name=form1>

<select name=sheng onchange="cityName(this.value)">
<option value="">请选择省名</option>
</select>

<select name=city>
<option value="">请选择城名</option>
</select>

</form>

<script language=javascript>
var cityouterHTML = document.form1.city.outerHTML.substr(0, document.form1.city.outerHTML.length-9);
function sheng()
{
var shengName = ["浙江", "江苏", "安徽", "江西"]; //这些数据可以从数据库中取得

var e = document.form1.sheng;
var s = e.outerHTML.substr(0, e.outerHTML.length-9) + "\r\n";
for (var i=0; i<shengName.length; i++){
s += "<option value='"+ shengName[i] +"'>"+ shengName[i] +"</option>\r\n";}
s += "</select>";
e.outerHTML = s;
} sheng();
function cityName(val)
{
var 浙江 = ["杭州", "宁波", "温州", "绍兴", "金华", "湖州"];
var 江苏 = ["南京", "苏州", "无锡", "常州", "镇江", "徐州"];
var 安徽 = ["合肥", "翕县", "黄山", "祁门", "休宁"];
var 江西 = ["南昌", "九江", "赣州", "上饶", "新余", "景德镇"];
//这些数据可以从数据库中取得

var e = document.form1.city;
var s = cityouterHTML;
if (val == "") {s += "</select>"; e.outerHTML = s; return;}
var a = eval(val);
for (var i=0; i<a.length; i++)
{
s += "<option value='"+ a[i] +"'>"+ a[i] +"</option>\r\n";
}
s += "</select>";
e.outerHTML = s;
}
</script>

[gucs]

上面是生成的HTML页面，下面的是生成页面的代码。

Dim objDep, objGrp, i, objString, strTemp
Dim objTemplate, strRtn
Dim objWKRight

Set objDep = New XTDepartment
Set objGrp = New XTDepartment
Set objWKRight = New WKRight
Set objString = New GString
Set objTemplate = New Template

objTemplate.SetRoot "."
objTemplate.ReDimVar
objTemplate.SetFile "ur_add_f", "ur_add.html"
objTemplate.SetBlock "ur_add_f", "DEP_INFO", "dep"
objTemplate.SetBlock "ur_add_f", "GRP_INFO", "grp"
objTemplate.SetBlock "ur_add_f", "URRIGHT_INFO", "urright"


'//////////////////////////////////////////////////////////////////////////
' Department

objDep.DepBrowse
objDep.MoveFirst
Do While Not objDep.Eof
objTemplate.SetVar "DEP_ID", objDep.DepID
objTemplate.SetVar "DEP_NAME", objDep.DepName
objTemplate.Parse "dep", "DEP_INFO", True

objDep.MoveNext
Loop


'//////////////////////////////////////////////////////////////////////////
' Group

i = 0
objGrp.GrpBrowse 0
Do While Not objGrp.Eof
strTemp = "arrGroup[" & i &"] = new Array(3)" & vbCrLf
strTemp = strTemp & "arrGroup[" & i & "][0] = " & objGrp.DepID & vbCrLf
strTemp = strTemp & "arrGroup[" & i & "][1] = " & objGrp.ID & vbCrLf
strTemp = strTemp & "arrGroup[" & i & "][2] = '" & objGrp.Name & "'"

objTemplate.SetVar "SCRIPT.VAR", strTemp
objTemplate.Parse "grp", "GRP_INFO", True

objGrp.MoveNext
i = i + 1
Loop


'//////////////////////////////////////////////////////////////////////////
' User Right

objWKRight.Browse 0
Do While Not objWKRight.Eof
objTemplate.SetVar "URR_ID", objWKRight.ID
objTemplate.SetVar "URR_NAME", objWKRight.Name
objTemplate.Parse "urright", "URRIGHT_INFO", True

objWKRight.MoveNext
Loop

objTemplate.SetVar "FORM.ACTION", "ur_add.asp"

objTemplate.Parse "ur_add_f_print", "ur_add_f", False
strRtn = objTemplate.Print("ur_add_f_print")

Response.Write strRtn

[gucs]

程序中用到了模板，但是，方法是一样的。

[fbj007]

先将数据库里的数据读取到客户端（数据不多）
然后再用javascript来控制（这个应该不难）

[lsrzm]

<!--月影飞鸿2003－05－25 晚-->
<!--#include file = dbconn.asp-->
<body onload = ChangeProvince(document.all.Province)>
<%
Dim Arr_City

sub CloseRs(rs)
Rs.close
set Rs = nothing
end sub

Sql_All = "Select Id,Name from prover"
set Rs_All = Server.CreateObject ("adodb.recordset")
Rs_All.Open Sql_All,conn,3,1

'动态生成一个内容为省的select
Response.Write "<Select name = Province id = Province onchange = ChangeProvince(this)>"
do while not Rs_All.EOF
%>
<option value = <%=Rs_All("Id")%>><%=Rs_All("Name")%>
<%
Rs_All.MoveNext
loop
Response.Write "</Select>"
'到此第一个select为止

CloseRs(Rs_All)

'在城市表city中选择所有记录。Id：城市Id；CId：省Id；Name：城市的名字。
'然后按照：省Id加上“，”加上城市Id加上“，”加上城市的名字组合成一个字符串；
'如：'1,2,济南'，表示：省的Id是1，城市的Id是2，城市的名字是 济南。
'然后每一个类似的字符串作为一个一维数组的一个元素的值。
'如此循环，动态生成了一个数组，每一个下表的值为类似“1,2,济南”的字符串
Sql_City= "select Id,CId,Name from city order by Id"
set Rs_City = server.CreateObject ("adodb.recordset")
Rs_City.Open Sql_City,conn,3,1
count = Rs_City.RecordCount '得到动态数组的元素个数
redim Arr_City(count) '重新初始化动态数组
i = 0
do while not Rs_City.EOF
New_Str = ""
theId = Rs_City("Id") '得到城市Id
theCId = Rs_City("CId") '得到省的Id
theName = Rs_City("Name") '得到城市的名字
New_Str = theCId&","&theId&","&theName '组合成一个字符串
Arr_City(i) = New_Str '给数组赋值
i = i +1
Rs_City.MoveNext
loop

'动态数组的创建到此为止

CloseRs(Rs_City)
Conn.Close
set Conn = Nothing

'然后把上边动态生成的数组Arr_City赋值给javascipt中的一个数组：All_City
Response.Write "<script language = javascript>"
Response.Write " var All_City = new Array("&count&");"
for i = lbound(Arr_City) to ubound(Arr_City)-1
Response.Write "All_City["&i&"] = '"&Arr_City(i)&"';"
next
Response.Write "</script>"
'数组赋值到此为止

'产生一个空的select,用来存放动态生成的城市
%>
<select name = City id = City>
</select>
<% '到此为止 %>
</body>

<script language = javascript>

function ChangeProvince(id)
{
theProvinceId = id.options[id.selectedIndex].value; //得到所选择省的Id

for (j = document.all.City.length;j>=0;j--) //去掉原来城市select中的城市
document.all.City.remove(j);

for (i = 0 ;i<<%=count%>;i++)
{
theCity = All_City[i].split(","); //利用函数split生成一个数组theCity，内容类似为（"1","2","济南"）
if (theProvinceId == theCity[0])
{
document.all.City.options.add(new Option(theCity[2])); //第二个select动态增加内容
}
}

}
</script>