三种省市级联下拉列表的写法,二维数组的实现

复制代码 代码如下:

javascript没有二维数组.所有自定义了一个数组类,下面是实例代码。

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; 
<html xmlns="" > 
<head> 
<title>二维函数-www.jbxue.com</title> 
<script type="text/javascript" language="javascript"> 
/* 
形成了一个rowLength,colLength的数组 
*/ 
function DArray(rowLength, colLength) { 
var dArray = new Array(rowLength); 
//给每一列都添加一个关于colLength的数据 
for (var i = 0; i < rowLength; i ) { 
dArray[i] = new Array(colLength); 

return dArray; 

function GetArray() { 
var dArray = new DArray(10, 10); 
dArray[0][10] = 100; 
dArray[0][1] = "我喜欢JS"; 
alert(dArray[0][10] "," dArray[0][1]); 

</script> 
</head> 
<body> 
<input type="button" value="获取二维" onclick="GetArray()" /> 
</body> 
</html> 

通过声明二维数组绑定SELECT下拉菜单 

代码:

<HTML> 
<HEAD> 
<TITLE>动态改变下拉菜单内容示例-www.jbxue.com</TITLE> 
</HEAD> 
<SCRIPT LANGUAGE=javascript> 
//定义一个二维数组aArray,用于存放城市名称。 
var aCity=new Array(); 
aCity[0]=new Array(); 
aCity[1]=new Array(); 
aCity[2]=new Array(); 
aCity[3]=new Array(); 
//赋值,每个省份的城市存放于数组的一行。 
aCity[0][0]="--请选择--"; 
aCity[1][0]="--请选择--"; 
aCity[1][1]="广州市"; 
aCity[1][2]="深圳市"; 
aCity[1][3]="珠海市"; 
aCity[1][4]="汕头市"; 
aCity[1][5]="佛山市"; 
aCity[2][0]="--请选择--"; 
aCity[2][1]="长沙市"; 
aCity[2][2]="株州市"; 
aCity[2][3]="湘潭市"; 
aCity[3][0]="--请选择--"; 
aCity[3][1]="杭州市"; 
aCity[3][2]="苏州市"; 
aCity[3][3]="温州市"; 
function ChangeCity() 

var i,iProvinceIndex; 
iProvinceIndex=document.frm.optProvince.selectedIndex; 
iCityCount=0; 
while (aCity[iProvinceIndex][iCityCount]!=null) 
iCityCount ; 
//计算选定省份的城市个数 
document.frm.optCity.length=iCityCount;//改变下拉菜单的选项数 
for (i=0;i<=iCityCount-1;i )//改变下拉菜单的内容 
document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]); 
document.frm.optCity.focus(); 

</SCRIPT> 
<BODY ONfocus=ChangeCity()> 
<H3>选择你所在的省份及城市</H3> 
<FORM NAME="frm"> 
<P>省份: 
<SELECT NAME="optProvince" SIZE="1" ONCHANGE=ChangeCity()> 
<OPTION>--请选择--</OPTION> 
<OPTION>广东省</OPTION> 
<OPTION>湖南省</OPTION> 
<OPTION>浙江省</OPTION> 
</SELECT> 
</P> 
<P>城市: 
<SELECT NAME="optCity" SIZE="1"> 
<OPTION>--请选择--</OPTION> 
</SELECT> 
</P> 
</FORM> 
</BODY> 
</HTML>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" >
<head>
<title>二维函数</title>
<script type="text/javascript" language="javascript">
/*
形成了一个rowLength,colLength的数组
*/
function DArray(rowLength, colLength) {
var dArray = new Array(rowLength);
//给每一列都添加一个关于colLength的数据
for (var i = 0; i < rowLength; i ) {
dArray[i] = new Array(colLength);
}
return dArray;
}
function GetArray() {
var dArray = new DArray(10, 10);
dArray[0][10] = 100;
dArray[0][1] = "我喜欢JS";
alert(dArray[0][10] "," dArray[0][1]);
}
</script>
</head>
<body>
<input type="button" value="获取二维" onclick="GetArray()" />
</body>
</html>

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

通过声明二维数组绑定SELECT下拉菜单

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

复制代码 代码如下:

图片 1

<HTML>
<HEAD>
<TITLE>动态改变下拉菜单内容示例</TITLE>
</HEAD>
<SCRIPT LANGUAGE=javascript>
//定义一个二维数组aArray,用于存放城市名称。
var aCity=new Array();
aCity[0]=new Array();
aCity[1]=new Array();
aCity[2]=new Array();
aCity[3]=new Array();
//赋值,每个省份的城市存放于数组的一行。
aCity[0][0]="--请选择--";
aCity[1][0]="--请选择--";
aCity[1][1]="广州市";
aCity[1][2]="深圳市";
aCity[1][3]="珠海市";
aCity[1][4]="汕头市";
aCity[1][5]="佛山市";
aCity[2][0]="--请选择--";
aCity[2][1]="长沙市";
aCity[2][2]="株州市";
aCity[2][3]="湘潭市";
aCity[3][0]="--请选择--";
aCity[3][1]="杭州市";
aCity[3][2]="苏州市";
aCity[3][3]="温州市";
function ChangeCity()
{
var i,iProvinceIndex;
iProvinceIndex=document.frm.optProvince.selectedIndex;
iCityCount=0;
while (aCity[iProvinceIndex][iCityCount]!=null)
iCityCount ;
//计算选定省份的城市个数
document.frm.optCity.length=iCityCount;//改变下拉菜单的选项数
for (i=0;i<=iCityCount-1;i )//改变下拉菜单的内容
document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);
document.frm.optCity.focus();
}
</SCRIPT>
<BODY ONfocus=ChangeCity()>
<H3>选择你所在的省份及城市</H3>
<FORM NAME="frm">
<P>省份:
<SELECT NAME="optProvince" SIZE="1" ONCHANGE=ChangeCity()>
<OPTION>--请选择--</OPTION>
<OPTION>广东省</OPTION>
<OPTION>湖南省</OPTION>
<OPTION>浙江省</OPTION>
</SELECT>
</P>
<P>城市:
<SELECT NAME="optCity" SIZE="1">
<OPTION>--请选择--</OPTION>
</SELECT>
</P>
</FORM>
</BODY>
</HTML>

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

代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" html xmlns="...

<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"
"">
<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"
"">
<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>

 

本文由星彩网app下载发布于前端技术,转载请注明出处:三种省市级联下拉列表的写法,二维数组的实现

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。