三种省市级联下拉列表的写法

JavaCrazyer

浏览: 3011882 次
性别:
来自: 河南

最近访客更多访客>>

beifengbei08

mnisummer

kristy_yy

qijojo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端-综合

json jQuery Ajax JavaScript 浏览器

一般我们如果实现省市级联效果，思路大致都如下：

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>

查看图片附件

13
顶

1
踩

分享到：

JS中关于checkbox全选或全不选 | web网页上的文件下载功能

2010-11-26 09:23
浏览 18329
评论(14)
分类:Web前端
查看更多

14 楼 qwe_rt 2010-12-02

xici_magic 写道

基本思想一样不过我作的下拉框的内容不是死的需要从数据库中取值

还是用配置文件吧，这种东西拿数据库太奢侈了。

13 楼 xici_magic 2010-12-02

基本思想一样不过我作的下拉框的内容不是死的需要从数据库中取值

12 楼 satikey 2010-11-29

qwe_rt 写道

satikey 写道

我们现在在做一个省高校院系的三级联动。我们的处理办法是动态获取数据，向服务器请求，再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json，如果有时间我可以贴出代码，交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息，我们打算尝试在RenRen.com上抓取。

想法不错啊，这个应该有现成的。每个人完成类似的功能都要自己去抓取一下。搞的大家都累。

写出来一个。。
看这里
http://satikey.iteye.com/blog/826988

11 楼 senton 2010-11-29

一个支持无限级下拉列表的控件：
http://senton.iteye.com/blog/797640

10 楼 issue123 2010-11-28

可以使用ext,yui等JS框架比较容易实现，http://www.openkj.com/detail.php?t=8

9 楼 qwe_rt 2010-11-27

satikey 写道

想法不错啊，这个应该有现成的。每个人完成类似的功能都要自己去抓取一下。搞的大家都累。

8 楼 satikey 2010-11-27

JavaCrazyer 写道

satikey 写道

你写代码是什么样的，可以发过来交流下嘛

正在写。现在要配女友去逛街，晚上开能写出来。

7 楼 qwe_rt 2010-11-27

Hedgehog 写道

qwe_rt 写道

作为忠实的用户，我表示很蛋疼。这样选来选去，很麻烦的。我宁愿自己动手打出来。

您愿意打，用户可并非愿意。另外数据提交错误又怎么处理？

既然部分用户选择自己type ,部分用户选择下拉框的方式，那就提供两种方式嘛。
数据作为字符串处理，比如日期，弄给提醒 “格式为yyyy-MM-dd”再加上一个js校验。
如此处理，不会出现数据提交错误吧。

6 楼 Hedgehog 2010-11-27

qwe_rt 写道

作为忠实的用户，我表示很蛋疼。这样选来选去，很麻烦的。我宁愿自己动手打出来。

您愿意打，用户可并非愿意。另外数据提交错误又怎么处理？

5 楼 qwe_rt 2010-11-26

作为忠实的用户，我表示很蛋疼。这样选来选去，很麻烦的。我宁愿自己动手打出来。

4 楼 JavaCrazyer 2010-11-26

fengbo515 写道

个人觉得省市级联一类的东西用ajax占用服务器资源纯属浪费！

你的解决方案是什么样的呢

3 楼 JavaCrazyer 2010-11-26

satikey 写道

你写代码是什么样的，可以发过来交流下嘛

2 楼 fengbo515 2010-11-26

个人觉得省市级联一类的东西用ajax占用服务器资源纯属浪费！

1 楼 satikey 2010-11-26

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论