/*JQ*/
var arr = {
"选着省":{
"选着市":["选着区"]
},
"浙江省":{
"杭州市":["上城区","下城区","西湖区","拱墅区","江干区","滨江区"],
"宁波市":["海曙","江东","江北","鄞州","镇海","北仑"]
},
"江苏省":{
"南京市":["南A","南B","南C","南D","南E"],
"苏州市":["苏A","苏B","苏C","苏D","苏E"]
},
"上海市":{
"黄浦区":null,
"徐汇区":null
}
};
var myHome = function(a,b,c){
this.pare = $(a);
this.city = $(b);
this.area = $(c);
this.base();
}
myHome.prototype = {
base:function(){
this.star();
this.opcl();
},
star:function(){
var _pare = this.pare,_city = this.city, _area = this.area;
_city.html("<option>选着市</option>");
_area.html("<option>选着区</option>");
for(var i in arr){
_pare.append("<option>"+ i +"</option>")
}
_city.attr("disabled","disabled");
_area.attr("disabled","disabled");
},
opcl:function(){
var _pare = this.pare,_city = this.city, _area = this.area,keyPar = null,keyCity = null;
_pare.find("option").click(function(){
_city.removeAttr("disabled");
_area.removeAttr("disabled");
_area.show();
_city.html("");
_area.html("");
keyPar = $(this).html();
if(keyPar == "选着省"){
_city.attr("disabled","disabled");
_area.attr("disabled","disabled");
}
for(var i in arr[keyPar]){
_city.append("<option>"+ i +"</option>")
}
for(var i in arr[keyPar]){
if(arr[keyPar][i]==null){
_area.hide();
break;
}
for(var y=0; y<arr[keyPar][i].length; y++){
_area.append("<option>"+ arr[keyPar][i][y] +"</option>")
}
break;
}
_city.find("option").click(function(){
keyCity = $(this).html();
_area.html("")
if(arr[keyPar][keyCity]==null){return}
for(var i=0; i<arr[keyPar][keyCity].length; i++){
_area.append("<option>"+ arr[keyPar][keyCity][i] +"</option>")
}
})
})
}
}
new myHome("#myPare","#myCity","#myArea");
/*html*/
<select id="myPare"></select>
<select id="myCity"></select>
<select id="myArea"></select>