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

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

1、利用省份下拉框的选项改变事件onChange

2、根据用户选择的省份，动态添加城市下拉框的值

第一种方式，也是最原始的方式

<span style="font-size:
large;"><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></span>

如果有很多城市，就需要定义很多变量，编写很多重复的代码.使用数组优化省市级联功能

第二方式，通过数组的方式

<span style="font-size:
large;"><!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></span>

第三种方式，可以通过数组标识方式，也就是使用文字下标的数组再次优化

<span
style="font-size: large;"><!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>
</span>

时间： 2024-10-22 03:35:57

三种省市级联下拉列表的写法的相关文章

thinkPHP中省市级联下拉列表

公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @param $list :数据源 * @param $value :显示的option的value值,下标 例:$list['id']中的id * @param $text :显示的option的text值 例:$list['name']中的name * @param int $selectIndex :

八数码三种用时差距极大的写法

进化史,一种比一种长,一种比一种快.不过第三种似乎还不是最终形态. 第一种,傻逼级迭代加深. 去年十一月写的,那时候刚刚学迭代加深,敲了一个钟头才敲完,codevs上直接过,就没太管,觉得这是个水题.实际上呢,看后文. 1 #include<algorithm> 2 #include<iostream> 3 #include<cstring> 4 #include<cstdio> 5 using namespace std; 6 int sx,sy,lim,

vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-

同一个逻辑的三种写法

同一个逻辑的三种写法: 我的写法 ? 林姐的写法 方法一 方法二 这种方法节省内存

for循环的三种写法

第一种写法  传统的方法,遍历数组 String[] arr = { "amy", "heinrich", "cindy", "git" }; for (int i = 0; i < arr.length; i++) { System.out.println(arr[i]); } 打印台 amy heinrich cindy git 这种方式最简单,对数组还有集合都可以 第二种 而对于遍历Collection对象,这个循

HDU Today（三种写法）（最短路）

Description 经过锦囊相助,海东集团终于度过了危机,从此,HDU的发展就一直顺风顺水,到了2050年,集团已经相当规模了,据说进入了钱江肉丝经济开发区500强.这时候,XHD夫妇也退居了二线,并在风景秀美的诸暨市?浦镇陶姚村买了个房子,开始安度晚年了. 这样住了一段时间,徐总对当地的交通还是不太了解.有时很郁闷,想去一个地方又不知道应该乘什么公交车,在什么地方转车,在什么地方下车(其实徐总自己有车,却一定要与民同乐,这就是徐总的性格). 徐总经常会问蹩脚的英文问路:"Can you h

js中斐波拉切数的三种写法；

js中斐波拉切数的三种写法: function factorial(num){ if(num <=1){ return 1; }else{ return num* factorial(num-1); } } console.log(factorial(5));//120 面这个函数的执行与函数名紧紧耦合在了一起,可以使用arguments.callee可以消除函数解耦 第二种(在严格模式下,访问这个属性会抛出TypeError错误) function factorial(num){ if(num

鼠标移到图片变化的三种写法(可移植性强、代码少)

当鼠标移动到某个图片的时候,图片变化.当鼠标移出去的时候,图片变回来.下面是三种写法:第一种,也是最笨,最麻烦的写法,如下: 1 $(".web-footer2 .inner").each(function(){ 2 $(this).find("ul").eq(1).find("img").eq(0).hover(function(){ 3 $(this).attr("src","/img/footer-qq2.pn

布局填充器的三种写法

布局填充器的三种写法:  1.layoutInflater=layoutInflater.from(this);  2.layoutInflater=(LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);  3.layoutInflater=this.getLayoutInflater();