1. [代码] [JavaScript]代码 !doctype htmlhtml head meta charset="UTF-8" meta name="Keywords" content="" meta name="Description" content="" titleDocument/title style type="text/css"*{margin:0;padding:0;}body{font-size:14px;font-family:"微软
1. [代码][JavaScript]代码
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;font-family:"微软雅黑"}
a{text-decoration:none;color:#000}
ul li{list-style:none}
select{width:100px;}
</style>
</head>
<body>
<select name="" id="pro"></select>
<select name="" id="city"></select>
<select name="" id="county"></select>
<script type="text/javascript">
(function(win){
win.onload=function(){
/*-------------湖北省--------------------*/
//黄冈市,武汉市
var hgCity={
name:"黄冈市",
children:["蕲春","武穴","溪水"]
};
var whCity={
name:"武汉市",
children:["汉口","武昌","汉阳"]
};
var hbArray=[];
hbArray.push(whCity,hgCity);
//湖北省对象
var hbPro={
name:"湖北省",
children:hbArray
};
/*---------------广东省-------------------*/
//深圳市,东莞市
var szCity={
name:"深圳市",
children:["南山区","罗湖区","盐田区"]
};
var dgCity={
name:"东莞市",
children:["凤岗","莞城","常平"]
};
var gdArray=[];
gdArray.push(szCity,dgCity);
var gdPro={
name:"广东省",
children:gdArray
};
/*----------------青海省--------------------*/
//西宁市，玉树州
var xnCity={
name:"西宁市",
children:["城东区","城西区","城北区"]
};
var ysCity={
name:"玉树州",
children:["玉树县","杂多县","治多县"]
};
var qhArray=[];
qhArray.push(xnCity,ysCity);
var qhPro={
name:"青海省",
children:qhArray
};
//中国省市县数组
var chinArray=[];
chinArray.push(hbPro,gdPro,qhPro);
/*-------------------------------------------------------------------*/
//获取省市县各级dom对象
var proDom = document.getElementById("pro");
var cityDom =document.getElementById("city");
var countyDom=document.getElementById("county");
/*------------------先初始化个选项卡-----------------------*/
//初始化省
addDddress(chinArray,proDom);
//初始化市
pro();
//初始化县，区
cit();
/*----------根据省选项的触发事件，自动填充市选项卡---------*/
proDom.onchange=pro;
function pro(){
//先清空city选项
cityDom.innerHTML="";
//当身份选项被改变时，获取省份对应的value值
var num = proDom.value;
//被选择的省份对应的市
var cityArray= chinArray[num].children;
addDddress(cityArray,cityDom);
//联动县
cit();
};
//根据市选项的触发事件，自动填充县，区选项卡
cityDom.onchange=cit;
function cit(){
//每次改变时先清空上一次的值
countyDom.innerHTML="";
//当市被改变时，自动获取对应的省，市的value
var num1 = proDom.value;
var num2 = cityDom.value;
//被选择的市对应的县，区
var countyArray = chinArray[num1].children[num2].children;
addDddress(countyArray,countyDom);
};
};
function addDddress(adrArray,dom){
for(var i=0,len=adrArray.length;i<len;i++){
var opt=document.createElement("option");
if(adrArray[i].name){
opt.innerHTML=adrArray[i].name;
}else{
opt.innerHTML=adrArray[i];
}
opt.value=i;
dom.appendChild(opt);
}
}
})(window)
</script>
</body>
</html>