三种省市级联下拉列表的写法
一般我们如果实现省市级联效果，思路大致都如下：
1、利用省份下拉框的选项改变事件onChange
2、根据用户选择的省份，动态添加城市下拉框的值
第一种方式，也是最原始的方式
<HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>注册</TITLE><SCRIPT language="JavaScript" > function changeCity( ){ //获取用户选择的省份 var province=document.myform.selProvince.value; var newOption1,newOption2; switch(province){ //根据用户选择的省份动态创建城市下拉列表 case "四川省" : newOption1= new Option("成都市","chengdu");newOption2= new Option("泸州市","luzhou");break; case "湖北省" : newOption1= new Option("武汉市","wuhan");newOption2= new Option("襄樊市","xiangfan");break; case "山东省" : newOption1= new Option("青岛市","qingdao"); newOption2= new Option("烟台市","yantai");break; } //清除原有选项 document.myform.selCity.options.length=0; //将选项添加到选项数组 document.myform.selCity.options.add(newOption1); document.myform.selCity.options.add(newOption2); }</SCRIPT> </HEAD><BODY><FORM name="myform" action="register_success.htm" ><TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0"> <TR> <TD align="center">省份 </TD> <!--当用户选择不同省份时，将调用函数，改变城市下拉列表值--> <TD><SELECT name="selProvince" onChange="changeCity( )"> <OPTION>--请选择开户帐号的省份--</OPTION> <OPTION value="四川省">四川省</OPTION> <OPTION value="山东省">山东省</OPTION> <OPTION value="湖北省">湖北省</OPTION> </SELECT></TD> </TR> <TR> <TD align="center" valign="bottom"> 城市 </TD> <TD><P> <SELECT name="selCity"> <OPTION>--请选择开户帐号的城市--</OPTION> </SELECT> </P> </TD> </TR> </TR></TABLE></FORM></BODY></HTML>如果有很多城市，就需要定义很多变量，编写很多重复的代码.使用数组优化省市级联功能?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>注册</TITLE><SCRIPT language="JavaScript" > function changeCity( ) { //创建数组，可以不指定大小 var cityList = new Array( ); //为数组赋值。每个单元格可以是数组。JavaScript不支持二维数组 cityList[0]=['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州']; cityList[1]=['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照']; cityList[2] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江']; //获得省份选项的索引号，如四川省为1，比对应数组索引号多1[这么说的原因是升级下拉列表第一项是'请选择省份'也占一个索引位置] var pIndex=document.myform.selProvince.selectedIndex-1; var newOption1; document.myform.selCity.options.length=0; for (var j in cityList[pIndex]) { newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]); document.myform.selCity.options.add(newOption1); } } </SCRIPT> </HEAD><BODY><FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )"><TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0"> <TR> <TD align="center">省份 </TD> <TD><SELECT name="selProvince" id="selProvince" onChange="changeCity( )"> <OPTION>--请选择开户帐号的省份--</OPTION> <OPTION value="四川省">四川省</OPTION> <OPTION value="山东省">山东省</OPTION> <OPTION value="湖北省">湖北省</OPTION> </SELECT></TD> </TR> <TR> <TD><DIV align="center">城市</DIV></TD> <TD><SELECT name="selCity" id="selCity" onChange="myfun1( )"> <OPTION>--请选择开户帐号的城市--</OPTION> </SELECT></TD> </TR></TABLE></FORM></BODY></HTML>?第三种方式，可以通过数组标识方式，也就是使用文字下标的数组再次优化<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>注册</TITLE><SCRIPT language="JavaScript" > function changeCity( ) { //JavaScript中的数组下标可以采用标识符代替。 //可以根据用户选择的value值，与数组下标标识 进行比较，从而找出该省包括的城市。 var province=document.myform.selProvince.value; var cityList = new Array( ); //数组下标采用文字标识符代替 cityList['山东省'] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照']; cityList['四川省'] =['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州']; cityList['湖北省'] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江']; document.myform.selCity.options.length=0;//根据省份下拉框的值，获取对应数组的索引标识 var pIndex=document.myform.selProvince.value; var newOption1; document.myform.selCity.options.length=0; //数组的读取和数字索引方式相同 for (var j in cityList[pIndex]) { newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]); document.myform.selCity.options.add(newOption1); } } </SCRIPT> </HEAD><BODY><FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )"><TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0"> <TR> <TD align="center">省份 </TD> <TD><SELECT name="selProvince" id="selProvince" onChange="changeCity( )"> <OPTION>--请选择开户帐号的省份--</OPTION> <OPTION value="四川省">四川省</OPTION> <OPTION value="山东省">山东省</OPTION> <OPTION value="湖北省">湖北省</OPTION> </SELECT></TD> </TR> <TR> <TD><DIV align="center">城市</DIV></TD> <TD><SELECT name="selCity" id="selCity" onChange="myfun1( )"> <OPTION>--请选择开户帐号的城市--</OPTION> </SELECT></TD> </TR></TABLE></FORM></BODY></HTML>??
1 楼 satikey 2010-11-26 我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据，向服务器请求，再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json，如果有时间我可以贴出代码，交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息，我们打算尝试在RenRen.com上抓取。 2 楼 fengbo515 2010-11-26 个人觉得省市级联一类的东西用ajax占用服务器资源纯属浪费！ 3 楼 JavaCrazyer 2010-11-26 satikey 写道我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据，向服务器请求，再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json，如果有时间我可以贴出代码，交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息，我们打算尝试在RenRen.com上抓取。