关于列表项变更，请参照~~~<script language="javascript"> <!-- function funadd() { var o = document.all.S1; o.options[o.length] = new Option('sopou','6'); }
function funchange() { var o = document.all.S1; var i; for(i=0;i<o.length;i++) { o.remove(i); } for(i=0;i<8;i++) { var p = new Option('text'+i,i) o.add(p,o.length); }
<TD align=middle bgColor=#CCCCCC><div align="right">省、地市名称</div></TD>
<TD>
<select name=province class="inputCopy">
</select> <select name=city class="inputCopy">
</select> <input type=hidden name=result class="inputCopy" size="20">
<script>
var arrSel=["province","city"];
//arrSel定义了要修改的下拉框和xml数据的节点名称
</script> <xml id=xmldata> <xmldata>
<province value="北京市"><city value="市辖区"></city><city value="市辖县"></city></province><province value="天津市"><city value="市辖区"></city><city value="市辖县"></city></province><province value="河北省"><city value="石家庄市"></city><city value="唐山市"></city><city value="秦皇岛市"></city><city value="邯郸市"></city><city value="邢台市"></city><city value="保定市"></city><city value="张家口市"></city><city value="承德市"></city><city value="沧州市"></city><city value="廊坊市"></city><city value="衡水市"></city></province><province value="山西省"><city value="太原市"></city><city value="大同市"></city><city value="阳泉市"></city><city value="长治市"></city><city value="晋城市"></city><city value="朔州市"></city><city value="晋中市"></city><city value="运城市"></city><city value="忻州市"></city><city value="临汾市"></city><city value="吕梁地区"></city></province><province value="内蒙"><city value="呼和浩特市"></city><city value="包头市"></city><city value="乌海市"></city><city value="赤峰市"></city><city value="通辽市"></city><city value="鄂尔多斯市"></city><city value="呼伦贝尔市"></city><city value="兴安盟"></city><city value="锡林郭勒盟"></city><city value="乌兰察布盟"></city><city value="巴彦淖尔盟"></city><city value="阿拉善盟"></city></province><province value="辽宁省"><city value="沈阳市"></city><city value="大连市"></city><city value="鞍山市"></city><city value="抚顺市"></city><city value="本溪市"></city><city value="丹东市"></city><city value="锦州市"></city><city value="营口市"></city><city value="阜新市"></city><city value="辽阳市"></city><city value="盘锦市"></city><city value="铁岭市"></city><city value="朝阳市"></city><city value="葫芦岛市"></city></province><province value="吉林省"><city value="长春市"></city><city value="吉林市"></city><city value="四平市"></city><city value="辽源市"></city><city value="通化市"></city><city value="白山市"></city><city value="松原市"></city><city value="白城市"></city><city value="延边州"></city></province><province value="黑龙江省"><city value="哈尔滨市"></city><city value="齐齐哈尔市"></city><city value="鸡西市"></city><city value="鹤岗市"></city><city value="双鸭山市"></city><city value="大庆市"></city><city value="伊春市"></city><city value="佳木斯市"></city><city value="七台河市"></city><city value="牡丹江市"></city><city value="黑河市"></city><city value="绥化市"></city><city value="大兴安岭地区"></city></province><province value="上海市"><city value="市辖区"></city><city value="市辖县"></city></province><province value="江苏省"><city value="南京市"></city><city value="无锡市"></city><city value="徐州市"></city><city value="常州市"></city><city value="苏州市"></city><city value="南通市"></city><city value="连云港市"></city><city value="淮安市"></city><city value="盐城市"></city><city value="扬州市"></city><city value="镇江市"></city><city value="泰州市"></city><city value="宿迁市"></city></province><province value="浙江省"><city value="杭州市"></city><city value="宁波市"></city><city value="温州市"></city><city value="嘉兴市"></city><city value="湖州市"></city><city value="绍兴市"></city><city value="金华市"></city><city value="衢州市"></city><city value="舟山市"></city><city value="台州市"></city><city value="丽水市"></city></province><province value="安徽省"><city value="合肥市"></city><city value="芜湖市"></city><city value="蚌埠市"></city><city value="淮南市"></city><city value="马鞍山市"></city><city value="淮北市"></city><city value="铜陵市"></city><city value="安庆市"></city><city value="黄山市"></city><city value="滁州市"></city><city value="阜阳市"></city><city value="宿州市"></city><city value="巢湖市"></city><city value="六安市"></city><city value="亳州市"></city><city value="池州市"></city><city value="宣城市"></city></province><province value="福建省"><city value="福州市"></city><city value="厦门市"></city><city value="莆田市"></city><city value="三明市"></city><city value="泉州市"></city><city value="漳州市"></city><city value="南平市"></city><city value="龙岩市"></city><city value="宁德市"></city></province><province value="江西省"><city value="南昌市"></city><city value="景德镇市"></city><city value="萍乡市"></city><city value="九江市"></city><city value="新余市"></city><city value="鹰潭市"></city><city value="赣州市"></city><city value="吉安市"></city><city value="宜春市"></city><city value="抚州市"></city><city value="上饶市"></city></province><province value="山东省"><city value="济南市"></city><city value="青岛市"></city><city value="淄博市"></city><city value="枣庄市"></city><city value="东营市"></city><city value="烟台市"></city><city value="潍坊市"></city><city value="济宁市"></city><city value="泰安市"></city><city value="威海市"></city><city value="日照市"></city><city value="莱芜市"></city><city value="临沂市"></city><city value="德州市"></city><city value="聊城市"></city><city value="滨州市"></city><city value="荷泽市"></city></province><province value="河南省"><city value="郑州市"></city><city value="开封市"></city><city value="洛阳市"></city><city value="平顶山市"></city><city value="安阳市"></city><city value="鹤壁市"></city><city value="新乡市"></city><city value="焦作市"></city><city value="濮阳市"></city><city value="许昌市"></city><city value="漯河市"></city><city value="三门峡市"></city><city value="南阳市"></city><city value="商丘市"></city><city value="信阳市"></city><city value="周口市"></city><city value="驻马店市"></city></province><province value="湖北省"><city value="武汉市"></city><city value="黄石市"></city><city value="十堰市"></city><city value="宜昌市"></city><city value="襄樊市"></city><city value="鄂州市"></city><city value="荆门市"></city><city value="孝感市"></city><city value="荆州市"></city><city value="黄冈市"></city><city value="咸宁市"></city><city value="随州市"></city><city value="恩施州"></city><city value="省直辖行政单位"></city></province><province value="湖南省"><city value="长沙市"></city><city value="株洲市"></city><city value="湘潭市"></city>
function qswhXml(num){var i,j,arrTemp=[];
for(i=0;i<num;i++)
arrTemp[i]=document.all(arrSel[i]).options[document.all(arrSel[i]).selectedIndex].text
if(num==arrSel.length){//这里处理最后的数据。document.all("result").value="所在地：("+arrTemp+")";
return;
}with(document.all(arrSel[num])){
length=0
var obj=document.all.xmldata.XMLDocument.childNodes[0];
for(i=0;i<num;i++)obj=obj.selectSingleNode(arrSel[i]+'[@value="'+arrTemp[i]+'"]');
for(i=0;i<obj.childNodes.length;i++)options[length++].text=obj.childNodes[i].getAttribute("value");
onchange=new Function("qswhXml("+(num+1)+")");
onchange();
}}
qswhXml(0);
</script> </TD>
</TR>
<!--
function funadd()
{
var o = document.all.S1;
o.options[o.length] = new Option('sopou','6');
}
function funchange()
{
var o = document.all.S1;
var i;
for(i=0;i<o.length;i++)
{
o.remove(i);
} for(i=0;i<8;i++)
{
var p = new Option('text'+i,i)
o.add(p,o.length);
}
}
//-->
</script><select name=S1>
<option value=1>aac</option>
</select><input type=button value=add onclick="funadd();">
<input type=button value=change onclick="funchange();">
关于XMLHTTP.可以说,是一个很好的接合剂.把客户端和服务端的距离拉近了.
利用XMLHTTP.我们可以实现很多好的想法.这文章.实现了二级连动Select.
传统二级连动是把所有的数据都传到有客户端..
利用XMLHTTP.我们可以实时地返回我们所需要的数据.
select.htm程序代码：
<script language="JavaScript">
function GetResult(str)
{
/*
*--------------- GetResult(str) -----------------
* GetResult(str)
* 功能:通过XMLHTTP发送请求,返回结果.
* 参数:str,字符串,发送条件.
* 实例:GetResult(document.all.userid.value);
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-27 19:02
*--------------- GetResult(str) -----------------
*/
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
oBao.open("POST","Server.asp?sel="+str,false);
oBao.send();
//服务器端处理返回的是经过escape编码的字符串.
//通过XMLHTTP返回数据,开始构建Select.
BuildSel(unescape(oBao.responseText),document.all.sel2)
}function BuildSel(str,sel)
{
/*
*--------------- BuildSel(str,sel) -----------------
* BuildSel(str,sel)
* 功能:通过str构建Select.
* 参数:str,字符串,由服务端返回的.有特定结构"字符串1,字符串2,字符串3"
* 参数:sel,要构建的Select
* 实例:BuildSel(unescape(oBao.responseText),document.all.sel2)
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-27 19:02
*--------------- BuildSel(str,sel) -----------------
*/
//先清空原来的数据.
sel.options.length=0;
var arrstr = new Array();
arrstr = str.split(",");
//开始构建新的Select.
for(var i=0;i<arrstr.length;i++)
{
sel.options[sel.options.length]=new Option(arrstr[i],arrstr[i])
}
}
</script>
<select name="sel" onChange="GetResult(this.value)">
<option value="">请选择
<option value="福建省">福建省
<option value="湖北省">湖北省
<option value="辽宁省">辽宁省
<select>
<select name="sel2"></select>
server.asp 服务器端处理.
程序代码：
<% @Language="JavaScript" %>
<%
function OpenDB(sdbname)
{
/*
*--------------- OpenDB(sdbname) -----------------
* OpenDB(sdbname)
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = OpenDB("database.mdb");
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-12 8:18
*--------------- OpenDB(sdbname) -----------------
*/
var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
var conn = Server.CreateObject("ADODB.Connection");
conn.Open(connstr);
return conn;
}
var oConn = OpenDB("data.mdb");
var province = Request("sel");
var arrResult = new Array();
var sql = "select city from china where province='"+province+"'";
var rs = Server.CreateObject("ADODB.Recordset");
rs.Open(sql,oConn,1,1);
while(!rs.EOF)
{
//遍历所有适合的数据放入arrResult数组中.
arrResult[arrResult.length] = rs("city").Value;
rs.MoveNext();
}
//escape解决了XMLHTTP。中文处理的问题.
//数组组合成字符串.由","字符串连接.
Response.Write(escape(arrResult.join(",")));
%>
数据库设计
data.mdb
表china.
字段
id 自动编号
province 文本
city 文本表:china 数据:
id province city
1 福建省 福州市
2 福建省 厦门市
3 福建省 泉州市
4 湖北省 武汉市
5 湖北省 荆州市
6 湖北省 宜昌市
7 辽宁省 沈阳市
8 辽宁省 大连市
9 辽宁省 盘锦市