/*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>

 

posted on 2012-07-18 20:45  somesayss  阅读(1614)  评论(0编辑  收藏  举报