您所在位置：主题：省份和城市的连动
wubife
[专家分：0] 发布于 2007-02-28 22:05:00
这里是以省份和城市为例，由于用到数据库，请先建立数据库dlist.mdb
数据库名称：dlist.mdb
省份表名称：Province
字段有：p_id(类型:自动编号),p_name(类型：文本,省份名称）
城市表名称：City
字段有：c_id(类型:自动编号),c_pid(类型:文本,省份名称，等于Province表中的p_name）,c_name(类型：文本，城市名称）
源程序如下，保存为ASP文件即可执行。
------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS动态列表示例</title>
<script language="JavaScript"><!--
<%
dim conn,rs,grs,i,j,pstr,sstr
set conn=server.createobject("adodb.connection")
set rs=server.createobject("adodb.recordset")
set grs=server.createobject("adodb.recordset")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("dlist.mdb")
'写省份JS数组
rs.open "select * from province;",conn,1,1
pstr="var pstr=new Array("
for i=0 to rs.recordcount-1
if i<>rs.recordcount-1 then
pstr=pstr & "'" & rs("p_name") & "',"
else
pstr=pstr & "'" & rs("p_name") & "'"
end if
getsub(rs("p_name"))
rs.movenext
next
pstr=pstr & ");"
response.write pstr & vbcrlf
rs.close()
set rs=nothing
set grs=nothing
'根据省份写城市JS数组的过程
sub getsub(pname)
grs.open "select * from city where c_pid='" & pname & "';",conn,1,1
sstr="var sstr" & i & "=new Array("
for j=1 to grs.recordcount
if j<>grs.recordcount then
sstr=sstr & "'" & grs("c_name") & "',"
else
sstr=sstr & "'" & grs("c_name") & "'"
end if
grs.movenext
next
grs.close()
sstr=sstr & ");"
response.write sstr & vbcrlf
end sub
%>
//添加列表项目
//参数说明：FrmName-表单名、sName-要添加的列表名、sText-列表项显示的文本、sValue-列表项的值
function addOption(FrmName, sName, sText, sValue) {
var def = true;
var sel = true;
var optionName = new Option(sText, sValue, def, sel);
var length = FrmName[sName].length;
FrmName[sName].options[length] = optionName;
FrmName[sName].options[length].selected = false;
}
//删除列表项目
//参数说明：FrmName-表单名、sName-要删除的列表名、force-是否删除原来的项目(True删除，False保留)
function delOptions(FrmName, sName, force) {
var length = FrmName[sName].options.length;
for (var i=0; i<FrmName[sName].options.length; i++) {
if (FrmName[sName].options[i].selected || force) {
FrmName[sName].options[i] = null;
length--;
i--;
}
}
}
//获得要添加列表项目的数组;
//参数说明：what-要获得选定值的列表
function getArrayValue(what) {
return eval(what.options[what.options.selectedIndex].value);
}
//根据当前选定值，添加列表项目
//参数说明：FrmName-表单名、sName1-要获取选定值的列表名、sName2-要动态加载的列表名
function updateOptions(FrmName, sName1, sName2) {
delOptions(FrmName,sName2,true);
var ArrayValue=getArrayValue(FrmName[sName1]);
for (var i=0; i<ArrayValue.length;i+=1) {
addOption(FrmName,sName2,ArrayValue[i],'sstr'+i);
}
FrmName[sName2].options.selectedIndex =0;//设置默认显示的列表项目
}
function GetValue(k){
alert(k);
}
//--></script>
</head>
<body onLoad="updateOptions(frmdlist, 'lsti', 'lstb');updateOptions(frmdlist, 'lstb', 'lsts')">
<p> </p>
<p> </p>
<p> </p>
<form action="" method="post" name="frmdlist" id="frmdlist">
<table width="408" border="0" align="center" cellpadding="2" cellspacing="2">
<tr>
<td width="400">JS动态列表示例<select name="lsti" style="display:none"><option value="pstr">pstr</select></td>
</tr>
<tr>
<td><select style="width:200" name="lstb" id="lstb" onChange="updateOptions(this.form, 'lstb', 'lsts')">
</select>
<input type="button" name="Submit2" value="GetValue" onClick="GetValue(document.frmdlist.lstb.value)"></td>
</tr>
<tr>
<td><select style="width:200" name="lsts" id="lsts">
</select>
<input type="button" name="Submit" value="GetValue" onClick="GetValue(document.frmdlist.lsts.value)"></td>
</tr>
</table>
</form>
</body>
</html>
这个是能够连动起来!可是怎么获得列表框里的显示的值呢?
数据库名称：dlist.mdb
省份表名称：Province
字段有：p_id(类型:自动编号),p_name(类型：文本,省份名称）
城市表名称：City
字段有：c_id(类型:自动编号),c_pid(类型:文本,省份名称，等于Province表中的p_name）,c_name(类型：文本，城市名称）
源程序如下，保存为ASP文件即可执行。
------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS动态列表示例</title>
<script language="JavaScript"><!--
<%
dim conn,rs,grs,i,j,pstr,sstr
set conn=server.createobject("adodb.connection")
set rs=server.createobject("adodb.recordset")
set grs=server.createobject("adodb.recordset")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("dlist.mdb")
'写省份JS数组
rs.open "select * from province;",conn,1,1
pstr="var pstr=new Array("
for i=0 to rs.recordcount-1
if i<>rs.recordcount-1 then
pstr=pstr & "'" & rs("p_name") & "',"
else
pstr=pstr & "'" & rs("p_name") & "'"
end if
getsub(rs("p_name"))
rs.movenext
next
pstr=pstr & ");"
response.write pstr & vbcrlf
rs.close()
set rs=nothing
set grs=nothing
'根据省份写城市JS数组的过程
sub getsub(pname)
grs.open "select * from city where c_pid='" & pname & "';",conn,1,1
sstr="var sstr" & i & "=new Array("
for j=1 to grs.recordcount
if j<>grs.recordcount then
sstr=sstr & "'" & grs("c_name") & "',"
else
sstr=sstr & "'" & grs("c_name") & "'"
end if
grs.movenext
next
grs.close()
sstr=sstr & ");"
response.write sstr & vbcrlf
end sub
%>
//添加列表项目
//参数说明：FrmName-表单名、sName-要添加的列表名、sText-列表项显示的文本、sValue-列表项的值
function addOption(FrmName, sName, sText, sValue) {
var def = true;
var sel = true;
var optionName = new Option(sText, sValue, def, sel);
var length = FrmName[sName].length;
FrmName[sName].options[length] = optionName;
FrmName[sName].options[length].selected = false;
}
//删除列表项目
//参数说明：FrmName-表单名、sName-要删除的列表名、force-是否删除原来的项目(True删除，False保留)
function delOptions(FrmName, sName, force) {
var length = FrmName[sName].options.length;
for (var i=0; i<FrmName[sName].options.length; i++) {
if (FrmName[sName].options[i].selected || force) {
FrmName[sName].options[i] = null;
length--;
i--;
}
}
}
//获得要添加列表项目的数组;
//参数说明：what-要获得选定值的列表
function getArrayValue(what) {
return eval(what.options[what.options.selectedIndex].value);
}
//根据当前选定值，添加列表项目
//参数说明：FrmName-表单名、sName1-要获取选定值的列表名、sName2-要动态加载的列表名
function updateOptions(FrmName, sName1, sName2) {
delOptions(FrmName,sName2,true);
var ArrayValue=getArrayValue(FrmName[sName1]);
for (var i=0; i<ArrayValue.length;i+=1) {
addOption(FrmName,sName2,ArrayValue[i],'sstr'+i);
}
FrmName[sName2].options.selectedIndex =0;//设置默认显示的列表项目
}
function GetValue(k){
alert(k);
}
//--></script>
</head>
<body onLoad="updateOptions(frmdlist, 'lsti', 'lstb');updateOptions(frmdlist, 'lstb', 'lsts')">
<p> </p>
<p> </p>
<p> </p>
<form action="" method="post" name="frmdlist" id="frmdlist">
<table width="408" border="0" align="center" cellpadding="2" cellspacing="2">
<tr>
<td width="400">JS动态列表示例<select name="lsti" style="display:none"><option value="pstr">pstr</select></td>
</tr>
<tr>
<td><select style="width:200" name="lstb" id="lstb" onChange="updateOptions(this.form, 'lstb', 'lsts')">
</select>
<input type="button" name="Submit2" value="GetValue" onClick="GetValue(document.frmdlist.lstb.value)"></td>
</tr>
<tr>
<td><select style="width:200" name="lsts" id="lsts">
</select>
<input type="button" name="Submit" value="GetValue" onClick="GetValue(document.frmdlist.lsts.value)"></td>
</tr>
</table>
</form>
</body>
</html>
这个是能够连动起来!可是怎么获得列表框里的显示的值呢?