js省市联动

最新推荐文章于 2024-11-19 16:41:52 发布

原创最新推荐文章于 2024-11-19 16:41:52 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#XHTML #HTML

本文介绍了一个简单的省市联动选择器实现方案，通过JavaScript动态更新下拉列表来实现不同省市及其下属地区的联动选择效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>省市联动</title>
</head>

<body>
<script language="javascript">

var areaArray = new Array();

areaArray[areaArray.length]=new Array("10","北京市");

areaArray[areaArray.length]=new Array("20","天津市");

areaArray[areaArray.length]=new Array("30","上海市");

var townArray = new Array();

townArray[townArray.length]=new Array("10","10010","东城区");
townArray[townArray.length]=new Array("10","10011","西城区");
townArray[townArray.length]=new Array("10","3000","朝阳区");
townArray[townArray.length]=new Array("10","4000","海淀区");
townArray[townArray.length]=new Array("10","5","宣武区");
townArray[townArray.length]=new Array("10","6","崇文区");

townArray[townArray.length]=new Array("20","1","南浔镇");

townArray[townArray.length]=new Array("20","2","菱湖镇");

townArray[townArray.length]=new Array("30","1","乐清");

townArray[townArray.length]=new Array("30","2","苍南");

function setTown(obj1ID,obj2ID){

var objArea = document.getElementById(obj1ID);

var objTown = document.getElementById(obj2ID);

var i;

var itemArray = null;

if(objArea.value.length > 0){

itemArray = new Array();

for(i=0;i<townArray.length;i++){

if(townArray[i][0]==objArea.value){

itemArray[itemArray.length]=new Array(townArray[i][1],townArray[i][2]);

}

}

}

for(i = objTown.options.length ; i >= 0 ; i--){

objTown.options[i] = null;

}

objTown.options[0] = new Option("请选地区");

objTown.options[0].value = "";

if(itemArray != null){

for(i = 0 ; i < itemArray.length; i++){

objTown.options[i+1] = new Option(itemArray[i][1]);

if(itemArray[i][0] != null){

objTown.options[i+1].value = itemArray[i][0];

}

}

}

}

</script>

<select name="areaid" id="areaid" onChange="setTown('areaid','townid')">

<option value="">请选市县</option>

<option value="10">北京</option>

<option value="20">上海</option>

<option value="30">安徽</option>

</select>
<select name="townid" id="townid">

<option value="">请选地区</option>

</select>
</body>
</html>