三级联动，json数据、可设置默认城市

浏览数：30 / 时间：2015年06月09日

闲来无事，折腾个三级联动，json数据、可设置默认城市、可配置是否显示第三级select

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省市县三级联动</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script type="text/javascript">
    var cityjson = ‘{‘
            +   ‘"province" : [‘
            +      ‘{"id" : "1", "name" : "北京市"},‘
            +      ‘{"id" : "2", "name" : "山西省"},‘
            +      ‘{"id" : "3", "name" : "河北省"}‘
            +   ‘],‘
            +   ‘"city" : [‘
            +      ‘{"cid" : "1", "id" : "1", "name":"海淀区"},‘
            +      ‘{"cid" : "1", "id" : "2", "name":"西城区"},‘
            +      ‘{"cid" : "1", "id" : "2", "name":"东城区"},‘
            +      ‘{"cid" : "1", "id" : "3", "name":"朝阳区"},‘
            +      ‘{"cid" : "2", "id" : "4", "name":"太原市"},‘
            +      ‘{"cid" : "2", "id" : "5", "name":"大同市"},‘
            +      ‘{"cid" : "2", "id" : "6", "name":"阳泉市"},‘
            +      ‘{"cid" : "3", "id" : "7", "name":"石家庄"},‘
            +      ‘{"cid" : "3", "id" : "8", "name":"蚌埠市"},‘
            +      ‘{"cid" : "3", "id" : "9", "name":"张家口"}‘
            +   ‘],‘
            +   ‘"county" : [‘
            +      ‘{"cid" : "1", "id" : "1", "name":"中关村"},‘
            +      ‘{"cid" : "1", "id" : "2", "name":"五道口"},‘
            +      ‘{"cid" : "2", "id" : "3", "name":"西直门"},‘
            +      ‘{"cid" : "2", "id" : "4", "name":"新街口"},‘
            +      ‘{"cid" : "2", "id" : "5", "name":"小西天"},‘
            +      ‘{"cid" : "3", "id" : "6", "name":"东直门"},‘
            +      ‘{"cid" : "3", "id" : "7", "name":"雍和宫"},‘
            +      ‘{"cid" : "3", "id" : "8", "name":"北新桥"},‘
            +      ‘{"cid" : "5", "id" : "9", "name":"城区"},‘
            +      ‘{"cid" : "5", "id" : "10", "name":"南郊区"},‘
            +      ‘{"cid" : "5", "id" : "11", "name":"开发区"}‘
            +   ‘]‘
            +‘}‘;
    ;(function($, window, document, undefined){
        $.fn.showCity = function(opt){
            this.defaults = {
                ‘cityjson‘          : cityjson,     //json字符串变量名
                ‘defaultShow‘       : false,        //市、县是否显示,默认不显示
                ‘showCounty‘        : true,         //是否显示县
                ‘defaultCity‘       : [0,0,0]       //默认城市，对应id
            };
            this.options = $.extend({}, this.defaults, opt);

            var oCityJson = eval(‘(‘+this.options.cityjson+‘)‘),
                oProvince = $(‘.province‘,this),
                oCity = $(‘.city‘,this),
                oCounty = $(‘.county‘,this),
                provinces = oCityJson.province,
                citys = oCityJson.city,
                countys = oCityJson.county;

            //创建省
            this.creatProvince = function(){
                var html = ‘‘;
                for(var i=0; i<provinces.length; i++){
                    html += ‘<option value=‘+provinces[i].id+‘>‘+provinces[i].name+‘</option>‘;
                }
                oProvince.append(html);
            };

            this.creat = function(){
                oProvince.html(‘<option value="0">选择省</option>‘);
                this.creatProvince();
                if(this.options.defaultShow){
                    oCity.show();
                    oCounty.show();
                    oCity.html(‘<option value="0">选择市</option>‘);
                    oCounty.html(‘<option value="0">选择县</option>‘);
                };
                this.defaultCity();
                this.checkProvince();
                if(this.options.showCounty){
                    this.checkCounty();
                }
            };

            //默认城市
            this.defaultCity = function(){
                if(this.options.defaultCity.toString() == ‘0,0,0‘){
                    return;
                };

                var optionsCity = ‘‘;
                for(var i=0; i<provinces.length; i++){
                    if(provinces[i].id == this.options.defaultCity[0]){
                        oProvince.val(provinces[i].id);
                        for(var j=0; j<citys.length; j++){
                            if(citys[j].cid == provinces[i].id){
                                optionsCity += ‘<option value=‘+citys[j].id+‘>‘+citys[j].name+‘</option>‘
                            }
                        }
                        oCity.append(optionsCity).show();
                    }
                };

                var optionscounty = ‘‘;
                for(var i=0; i<citys.length; i++){
                    if(citys[i].id == this.options.defaultCity[1] && citys[i].cid == oProvince.val()){
                        oCity.val(citys[i].id);
                        if(this.options.showCounty){
                            for(var j=0; j<countys.length; j++){
                                if(countys[j].cid == citys[i].id){
                                    optionscounty += ‘<option value=‘+countys[j].id+‘>‘+countys[j].name+‘</option>‘;
                                }
                            }
                            oCounty.append(optionscounty).show();
                        }
                    }
                };

                if(this.options.showCounty){
                    for(var i=0; i<countys.length; i++){
                        if(countys[i].id == this.options.defaultCity[2] && countys[i].cid == oCity.val()){
                            oCounty.val(countys[i].id);
                        }
                    };
                }
            }


            this.checkProvince = function(){
                oProvince.bind(‘change‘,function(){
                    var html = ‘<option value="0">选择市</option>‘;
                    var val = $(this).val();
                    for(var i=0; i<citys.length; i++){
                        if(citys[i].cid == val){
                            html += ‘<option value=‘+citys[i].id+‘>‘+citys[i].name+‘</option>‘
                        }
                    }
                    oCity.html(html).show();
                    oCounty.html(‘<option value="0">选择县</option>‘);
                })
            };

            this.checkCounty = function(){
                oCity.bind(‘change‘,function(){
                    var html = ‘<option value="0">选择县</option>‘;
                    var val = $(this).val();
                    for(var i=0; i<countys.length; i++){
                        if(countys[i].cid == val){
                            html += ‘<option value=‘+countys[i].id+‘>‘+countys[i].name+‘</option>‘
                        }
                    }
                    oCounty.html(html).show();
                })
            };
            
            return this.creat();
        }
    }(jQuery, window, document))

    $(function(){
        $(‘#selectItem‘).showCity({
            "defaultCity" : [2,5,10]
        });
    })
    </script>
</head>
<body>
<div class="selectItem" id="selectItem">
    <select class="province"></select>
    <select class="city" style="display:none"></select>
    <select class="county" style="display:none"></select>
</div>
</body>
</html>