`
JavaCrazyer
  • 浏览: 3012121 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

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

阅读更多

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

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>
 

 

 

  • 大小: 3.5 KB
13
1
分享到:
评论
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 写道
我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据,向服务器请求,再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json,如果有时间我可以贴出代码,交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息,我们打算尝试在RenRen.com上抓取。

想法不错啊,这个应该有现成的。每个人完成类似的功能都要自己去抓取一下。搞的大家都累。
8 楼 satikey 2010-11-27  
JavaCrazyer 写道
satikey 写道
我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据,向服务器请求,再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json,如果有时间我可以贴出代码,交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息,我们打算尝试在RenRen.com上抓取。

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



正在写。现在要配女友去逛街,晚上开能写出来。
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 写道
我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据,向服务器请求,再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json,如果有时间我可以贴出代码,交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息,我们打算尝试在RenRen.com上抓取。

你写代码是什么样的,可以发过来交流下嘛
2 楼 fengbo515 2010-11-26  
个人觉得省市级联一类的东西用ajax占用服务器资源纯属浪费!
1 楼 satikey 2010-11-26  
我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据,向服务器请求,再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json,如果有时间我可以贴出代码,交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息,我们打算尝试在RenRen.com上抓取。

相关推荐

    省市级联表格(不是下拉列表级联啊

    在这个场景中,"省市级联表格"并不是指传统的下拉列表级联,而是通过表格形式来展现省份和城市之间的层级结构。下面我们将深入探讨这个主题。 首先,我们要理解"非动态省市级联表单"的概念。这通常意味着表单中的...

    省市级联列表

    标题中的“省市级联列表”通常是指在数据库设计中用于存储中国省份和城市信息的一种数据结构,这在很多需要地域信息的应用中非常常见,比如电商、物流、招聘网站等。这种列表一般会包括省份和其下属的城市,形成一个...

    js省市级联下拉框

    在网页设计中,省市级联下拉框是一种常见的交互元素,用于用户选择所在省份和城市,常用于地址输入或者区域筛选等功能。这种级联效果通过JavaScript实现,能够提高用户体验,使得用户在选择时更为便捷。 实现省市级...

    js省市级联下拉菜单

    在网页开发中,省市级联下拉菜单是一种常见的交互元素,用于用户选择所在省份和城市。这种菜单的设计目的是节省页面空间并提供清晰的导航。在本案例中,我们主要讨论如何使用JavaScript实现这样的功能。 首先,我们...

    全国省市级联下拉菜单

    标题 "全国省市级联下拉菜单" 暗示了这是一个网页开发相关的项目,它涉及到在没有使用数据库的情况下,创建一个动态的、无刷新的中国省市联动选择菜单。这种功能通常用于用户输入地址或者选择地理位置时,提供方便的...

    ajax省市级联

    在网页开发中,"Ajax 省市级联"是一种常见的交互设计,用于实现用户选择省份时,自动加载并展示对应省份的城市列表。这种方式极大地提升了用户体验,避免了页面刷新,使得数据加载更为流畅。Ajax(Asynchronous ...

    js下拉菜单、省市级联

    JavaScript下拉菜单与省市级联是网页开发中常见的交互元素,它们主要用于提高用户在选择地理位置或选项时的体验。在本文中,我们将深入探讨这两种技术的实现方式、常见问题及优化策略。 首先,我们来讨论JavaScript...

    HTML中JavaScript版省市级联

    "HTML中JavaScript版省市级联"是一个常见的前端技术应用,用于实现动态的省市区选择功能。在这个场景下,用户可以从一个下拉菜单中选择省份,然后根据所选省份自动更新市、区的下拉选项。这种功能在注册、地址填写等...

    JavaScript实现常用二级省市级联下拉列表的方法

    本文实例讲述了JavaScript实现常用二级省市级联下拉列表的方法。分享给大家供大家参考。具体分析如下: 这里省和市的名称都是动态填充,选择省后自动填充城市 &lt;!DOCTYPE ...

    安卓 spinner 实现省市级联

    【安卓 Spinner 实现省市级联】是Android开发中常见的需求,用于在应用程序中创建一个下拉选择组件,展示省、市、区等地理层级的数据。Spinner控件在Android中广泛用于实现有限选项的选择,通常与Adapter配合使用,...

    省市级联的写法

    省市级联的写法,包括省市区镇等4个级联方式,需要参考的可以看一下

    javaScript省市级联

    使用javaScript实现省市级联(二级级联,不能三级级联)

    AJAX省市级联

    【AJAX省市级联】是一种常见的前端开发技术,用于实现网页上的动态下拉联动效果,让用户在选择省份后,自动加载并显示对应的市、区或县的列表,无需刷新整个页面。这种技术主要依赖于AJAX(Asynchronous JavaScript ...

    超强的jquery省市级联

    "超强的jquery省市级联"是指利用jQuery实现的一种动态联动效果,通常用于网页上的地址选择,例如选择省份后自动加载对应的城市列表,城市选择后再加载对应的区县列表。这种功能在电子商务网站、地图服务、物流配送等...

    省市级联实现

    ### 省市级联实现详解 #### 一、概述 在现代Web应用开发中,级联选择器(如省市区选择)是一种常见的交互设计模式,主要用于处理多层级数据的关联选择场景。例如,在用户填写地址时,根据所选省份动态显示对应的...

    中国城市省市级联选择插件

    中国城市省市级联选择插件,中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国...

    Ajax+jsp制作带数据库的省市级联下拉菜单

    总的来说,"Ajax+jsp制作带数据库的省市级联下拉菜单"是一种常见的前端与后端交互技术,它能够提高用户体验,减少不必要的网络请求。在实际项目中,开发者需要结合数据库设计、服务器端编程以及前端交互等多个方面,...

    模拟省市级联jsp页面模拟

    在IT行业中,省市级联(Province-City-County Cascade)是一种常见的前端交互设计,它用于在用户选择一个省份后自动加载并显示该省份下的城市列表,进一步选择城市后,再加载对应的城市下的区县列表。这种功能在地理...

    省市级联;最新的省市区数据包

    在IT行业中,省市级联(Province-City-County Association,简称PCCA)是一种常见的地理信息组织方式,尤其在Web开发中用于实现下拉选择框的联动效果,为用户提供便捷的地区选择体验。这个数据包是专门针对中国境内...

    省市级联菜单

    在IT行业中,省市级联菜单是一种常见的用户界面元素,尤其在网页或应用程序中,用于让用户选择省份和城市。这种交互方式能够有效地节省空间并提供良好的用户体验。本文将深入探讨省市级联菜单的设计原理、实现方法...

Global site tag (gtag.js) - Google Analytics