简易封装了一个省市区的三级联动js源代码,看客们可以扩展至4-6级
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8"/>
<title> p_c_p </title>
</head>
<body>
<form method="post" action="" name="form1">
<select name="province" id="provice"></select>
<select name="city" id="city"></select>
<select name="city" id="prefecture"></select>
</form>
<script type="text/javascript" src="../js/get.js"></script>
<script type="text/javascript" src="p_c_p.js"></script>
<script language="JavaScript" type="text/javascript">
window.οnlοad=function(){
/*获取三级联动的dom对象*/
var p=getId("provice");//省
var c=getId("city");//市
var pre=getId("prefecture");//区/县
p_c_p(p,c,pre);//直接调用封装好的方法即可,如果有扩展,可在下面继续增加change方法,然后调用相应的createElemenrts方法基于下标查找创建即可。
}
</script>
</body>
</html>
//创建一个联动的类,一个属性数组
function provice_city_prefecture(){this.Items=[];}
根据id给数组添加省,市,区的内容
provice_city_prefecture.prototype.add=function(id,name){
this.Items[id]=name;
}
//new一个对象,准备执行add方法根据id添加联动内容
var provice=new provice_city_prefecture();
function p_c_p(obj_1,obj_2,obj_3){
/*默认情况下第一行省*/
createElements(obj_1,provice.Items[0]);
/*默认情况下第一行市*/
createElements(obj_2,provice.Items["0_0"]);
/*默认情况下第一行区县*/
createElements(obj_3,provice.Items["0_0_0"]);
//开始联动根据不同的省找出与之对应的城市
obj_1.οnchange=function(){
/*每点一个省时,显示那个省的 省名 省会城市名 省会城市的第一个区/县名*/
createElements(obj_2,provice.Items["0_"+this.selectedIndex]);
/*默认情况下第一行区县*/
createElements(obj_3,provice.Items["0_"+this.selectedIndex+"_0"]);
}
//市级联动
obj_2.οnchange=function(){
change(obj_3,obj_1.selectedIndex,this.selectedIndex);
}
}
/*change 事件*/
function change(){
var str="0";//初始化str索引
var child=getTagName(arguments[0],"option");
if(arguments.length<3){
str+="_"+arguments[1];
var items=provice.Items[str];
createElements(arguments[0],items);
}else if(arguments.length>=3){
str+="_"+arguments[1]+"_"+arguments[2];
var items=provice.Items[str];
createElements(arguments[0],items);
}
}
function createElements(obj,items){
// 首先判断obj是否有option子节点,如果有,则先进行清除
var child=getTagName(obj,"option");
if(child.length!=0){
for(var i=child.length-1;i>-1;i--){
obj.removeChild(child[i]);
}
}
/*创建option*/
for(var i=0,j=items.length;i<j;i++){
var option=document.createElement("option");
option.innerHTML=items[i];
obj.appendChild(option);
}
}
/*下面部分为网上贴的*/
provice.add("0",["安徽","北京","福建","陕西"]);
provice.add("0_0",["安庆","蚌埠","巢湖","池州","滁州","阜阳","合肥","淮北","淮南","黄山","六安","马鞍山","宿州","铜陵","芜湖","宣城","亳州"]);
provice.add("0_1",["北京"]);
provice.add("0_2",["福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州"]);
provice.add("0_3",["西安","渭南","铜川","商洛","咸阳","宝鸡"]);
provice.add("0_0_0",["安庆市","怀宁县","潜山县","宿松县","太湖县","桐城市","望江县","岳西县","枞阳县"]);
provice.add("0_0_1",["蚌埠市","固镇县","怀远县","五河县"]);
provice.add("0_0_2",["巢湖市","含山县","和县","庐江县","无为县"]);
provice.add("0_0_3",["池州市","东至县","青阳县","石台县"]);
provice.add("0_0_4",["滁州市","定远县","凤阳县","来安县","明光市","全椒县","天长市"]);
provice.add("0_0_5",["阜南县","阜阳市","界首市","临泉县","太和县","颖上县"]);
provice.add("0_0_6",["长丰县","肥东县","肥西县"]);
provice.add("0_0_7",["淮北市","濉溪县"]);
provice.add("0_0_8",["凤台县","淮南市"]);
provice.add("0_0_9",["黄山市","祁门县","休宁县","歙县","黟县"]);
provice.add("0_0_10",["霍邱县","霍山县","金寨县","六安市","寿县","舒城县"]);
provice.add("0_0_11",["当涂县","马鞍山市"]);
provice.add("0_0_12",["灵璧县","宿州市","萧县","泗县","砀山县"]);
provice.add("0_0_13",["铜陵市","铜陵县"]);
provice.add("0_0_14",["繁昌县","南陵县","芜湖市","芜湖县"]);
provice.add("0_0_15",["广德县","绩溪县","郎溪县","宁国市","宣城市","泾县","旌德县"]);
provice.add("0_0_16",["利辛县","蒙城县","涡阳县","亳州市"]);
provice.add("0_1_0",["北京市","密云县","延庆县"]);
provice.add("0_2_0",["长乐市","福清市","福州市","连江县","罗源县","闽侯县","闽清县","平潭县","永泰县"]);
provice.add("0_2_1",["长汀县","连城县","龙岩市","上杭县","武平县","永定县","漳平市"]);
provice.add("0_2_2",["光泽县","建阳市","建瓯市","南平市","浦城县","邵武市","顺昌县","松溪县","武夷山市","政和县"]);
provice.add("0_2_3",["福安市","福鼎市","古田县","宁德市","屏南县","寿宁县","霞浦县","周宁县","柘荣县"]);
provice.add("0_2_4",["莆田市","仙游县"]);
provice.add("0_2_5",["安溪县","德化县","惠安县","金门县","晋江市","南安市","泉州市","石狮市","永春县"]);
provice.add("0_2_6",["大田县","建宁县","将乐县","明溪县","宁化县","清流县","三明市","沙县","泰宁县","永安市","尤溪县"]);
provice.add("0_2_7",["厦门市"]);
provice.add("0_2_8",["长泰县","东山县","华安县","龙海市","南靖县","平和县","云霄县","漳浦县","漳州市","诏安县"]);
provice.add("0_3_0",["高陵县","户县","蓝田县","西安市","周至县"]);
provice.add("0_3_1",["白水县","澄城县","大荔县","富平县","韩城市","合阳县","华县","华阴市","蒲城县","渭南市","潼关县"]);
provice.add("0_3_2",["铜川市","宜君县"]);
provice.add("0_3_3",["丹凤县","洛南县","山阳县","商洛市","商南县","镇安县","柞水县"]);
provice.add("0_3_4",["彬县","长武县","淳化县","礼泉县","乾县","三原县","武功县","咸阳市","兴平市","旬邑县","永寿县","泾阳县"]);
provice.add("0_3_5",["宝鸡县","凤县","凤翔县","扶风县","陇县","眉县","千阳县","太白县","岐山县","麟游县"]);
get.js 用到的方法
function getId(name){
if(typeof name=="string"){
return document.getElementById(name);
}
}
function getTagName(){
if(arguments.length<1){
document.getElementsByTagName(arguments[0]);
}else if(arguments.length>1){
if((typeof arguments[0]=="object") && (typeof arguments[1]=="string")){
return arguments[0].getElementsByTagName(arguments[1]);
}
}
}