一般我们如果实现省市级联效果,思路大致都如下:
1、利用省份下拉框的选项改变事件onChange
2、根据用户选择的省份,动态添加城市下拉框的值
![三种省市级联下拉列表的写法](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
第一种方式,也是最原始的方式
<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>
<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>
<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>
"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">
<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>
<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>
</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值,与数组下标标识 进行比较,从而找出该省包括的城市。
"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>
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">
<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>
<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>
</FORM>
</BODY>
</HTML>
</span>