三种省市级联下拉列表的写法
一般我們如果實現省市級聯效果，思路大致都如下：
1、利用省份下拉框的選項改變事件onChange
2、根據用戶選擇的省份，動態添加城市下拉框的值
第一種方式，也是最原始的方式
<span><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><!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>
總結
以上是生活随笔為你收集整理的三种省市级联下拉列表的写法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何判断lib和dll是32位还是64位
- 下一篇： CentOS 8.1成功安装最新Node