`
zhiheng1001319
  • 浏览: 3800 次
  • 性别: Icon_minigender_1
  • 来自: 西安
最近访客 更多访客>>
社区版块
存档分类
最新评论

简易封装一个省市区的三级联动方法

阅读更多

简易封装了一个省市区的三级联动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.onload=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.onchange=function(){

/*每点一个省时,显示那个省的 省名 省会城市名 省会城市的第一个区/县名*/

createElements(obj_2,provice.Items["0_"+this.selectedIndex]);

/*默认情况下第一行区县*/ 

createElements(obj_3,provice.Items["0_"+this.selectedIndex+"_0"]);

}

//市级联动

obj_2.onchange=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]);

}

}

}

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics