【js组件】修改cityselect以适应项目（2）

于 2014-02-17 18:42:40 发布
阅读量4k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdnight/article/details/19346415
版权

经过一段时间整理修改，终于将相关文件修改好，核心的文件如下：


/*
 Ajax 三级省市联动
 http://code.ciaoca.cn/
 日期：2012-7-18
 http://www.helloweba.com/view-blog-188.html
 settings 参数说明
 -----
 data:省市数据的json数据---因为可能是我的全国地区数据有点大，400kb以上，用异步加载会down，所以只能这样解决了。
 selectValue:选中的数据，请注意，选中的数据格式如下：400,500,100 可以null，空，一个数据，两个或三个数据，
 系统会优先将selectValue处理成为prov city dist三个参数。假如四个参数同时出现，会处理selectValue，忽略prov city dist三个参数。
 separator:分隔符，默认为逗号.
 prov:默认省份
 city:默认城市
 dist:默认地区（县）
 nodata:无数据状态
 required:必选项,
 callBack:回调函数，每次选中以后进行的处理。注意，选中后回调函数会有两个参数，第一个参数为选中的地区的id，中间用逗号分开，譬如：
 广东省代号 21000，广州市代号为21010，天河区代号为21015，那么传进来的参数就为：21000,21010,21015  当然这是举例子。
 第二个参数为名称，譬如：广东,广州,天河区。
 onfocus:function(){} 当用户点击三个select任意一个都触发。


 ------------------------------ */
(function($){
    $.fn.citySelect=function(settings){
        if(this.length<1){return;}
        //是否为空字符串
        var isEmpty = function (OriginString) {
            var currentStr = $.trim(OriginString);
            if (currentStr == "") { return true; }
            else { return false; }
        };
        // 默认值
        settings=$.extend({
            selectValue:null,
            separator:',',
            data:null,
            prov:null,
            city:null,
            dist:null,
            nodata:null,
            required:true,
            onfocus:function(){
                     console.log("注意我了。");
            },
            callback:function(selectValue,selectText){
                //--请覆盖这个方法。
                console.log("【用户选择的地区：】");
                console.log(selectValue);
                console.log(selectText);
            }
        },settings);
        var box_obj=this;
        var _this=this;
        var prov_obj=box_obj.find(".prov");
        var city_obj=box_obj.find(".city");
        var dist_obj=box_obj.find(".dist");
        var prov_val=settings.prov;
        var city_val=settings.city;
        var dist_val=settings.dist;
        //--按照
        if(settings.selectValue!=null){
            var _arr1= settings.selectValue.split(settings.separator);
            var _arr2=new Array();
            if(_arr1!=null&&_arr1.length>0){
                for(var str_1 in _arr1){
                    if(isEmpty(str_1)){
                        continue;
                    }
                    _arr2.push(str_1);
                }
            }
            settings.prov=null;
            settings.city=null;
            settings.dist=null;
            if(_arr2.length>=1){
                settings.prov=_arr2[0];
            }
            if(_arr2.length>=2){
                settings.city=_arr2[1];
            }
            if(_arr2.length>=3){
                settings.dist=_arr2[2];
            }
        }
        var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>";
        var city_json=settings.data;
        // 赋值市级函数
        var cityStart=function(){
            var prov_id=prov_obj.find("option:selected").val();
            if(prov_id==undefined||prov_id==null||prov_id==""){
                //--取第一个option为id
                prov_id=prov_obj.find("option:first").val();
            }
            /*
            if(!settings.required){
                prov_id--;
            };
            */
            //--没有选中任何省份。。。
            if(prov_id==undefined||prov_id==null||prov_id==""){
                city_obj.empty().attr("disabled",true);
                dist_obj.empty().attr("disabled",true);
                city_obj.css("display","none");
                dist_obj.css("display","none");
                return;
            }
            //--选中了省份，那么看看有没有该省份资料，且看看省份下面有多少城市。
            if(city_json[prov_id+""]==undefined||caculate_json_size(city_json[prov_id]["child"])<=0){
                city_obj.empty().attr("disabled",true);
                dist_obj.empty().attr("disabled",true);
                city_obj.css("display","none");
                dist_obj.css("display","none");
                return;
            }
            //--有省份的城市列表，那么就可以加上去了。
            // 遍历赋值市级下拉列表
            temp_html=select_prehtml;
            var _childData= city_json[prov_id]["child"];
            for(var _cityKey in _childData){
                var _cityItem=_childData[_cityKey];
                temp_html+="<option value='"+_cityItem["id"]+"'>"+_cityItem["name"]+"</option>";
            }
            city_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
            distStart();
        };

        // 赋值地区（县）函数
        var distStart=function(){
            var prov_id=prov_obj.find("option:selected").val();

                //prov_obj.get(0).selectedIndex;
            var city_id=city_obj.find("option:selected").val();
            var _prov_no_selected=false;
            if(prov_id==undefined||prov_id==null||prov_id==""){
                _prov_no_selected=true;
            }
            var _city_no_selected=false;
            if(city_id==undefined||city_id==null||city_id==""){
                _city_no_selected=true;
            }
            //--城市没有选择的，那么镇区就不要显示出来了。
            if(_city_no_selected){
                dist_obj.empty().attr("disabled",true);
                dist_obj.css("display","none");
                return;
            }
            //--选中了城市，那么看看有没有该城市资料，且看看城市下面有多少镇区。
            if(city_json[prov_id+""]==undefined||caculate_json_size(city_json[prov_id]["child"])<=0||city_json[prov_id]["child"][city_id]==undefined||caculate_json_size(city_json[prov_id]["child"][city_id])<0){
                dist_obj.empty().attr("disabled",true);
                dist_obj.css("display","none");
                return;
            }
            // 遍历赋值市级下拉列表
            temp_html=select_prehtml;
            var _childData= city_json[prov_id]["child"][city_id]["child"];
            for(var _townKey in _childData){
                var _townItem=_childData[_townKey];
                temp_html+="<option value='"+_townItem["id"]+"'>"+_townItem["name"]+"</option>";
            }
            dist_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
        };
        var caculate_json_size=function(jdata){
            if(jdata==undefined||jdata==null||jdata==""){
                return 0;
            }
            var _size=0;
            for(var key in jdata){
               _size++;
            }
            return _size;
        }

        var init=function(){
            // 遍历赋值省份下拉列表
            temp_html=select_prehtml;
            var _arr_html=new Array();
            for(var key in city_json){
                var _item=city_json[key];
                _arr_html.push("<option value='"+_item["id"]+"'>"+_item["name"]+"</option>");
            }
            temp_html+=_arr_html.join(" ");
            prov_obj.html(temp_html);

            // 若有传入省份与市级的值，则选中。（setTimeout为兼容IE6而设置）
            setTimeout(function(){
                if(settings.prov!=null){
                    prov_obj.val(settings.prov);
                    cityStart();
                    setTimeout(function(){
                        if(settings.city!=null){
                            city_obj.val(settings.city);
                            distStart();
                            setTimeout(function(){
                                if(settings.dist!=null){
                                    dist_obj.val(settings.dist);
                                };
                            },1);
                        };
                    },1);
                }else{
                    prov_obj.val(prov_obj.find("option:first").val());
                    cityStart();
                    setTimeout(function(){
                            city_obj.val(city_obj.find("option:first").val());
                            distStart();
                            setTimeout(function(){
                                city_obj.val(dist_obj.find("option:first").val());
                            },1);

                    },1);
                }
                //--最后执行callback
                _callBackHandler();
            },1);

            // 选择省份时发生事件
            prov_obj.bind("change",function(){
                cityStart();
                _callBackHandler();
            });

            // 选择市级时发生事件
            city_obj.bind("change",function(){
                distStart();
                _callBackHandler();
            });
            dist_obj.bind("change",function(){
                _callBackHandler();
            });
            prov_obj.focus(function(){
                settings.onfocus();
            });
            city_obj.focus(function(){
                settings.onfocus();
            });
            dist_obj.focus(function(){
                settings.onfocus();
            });
        };
        //--初始化后整个控件。
       init();
var _callBackHandler=function(){
    var _prov_id=prov_obj.find("option:selected").val();
    var _city_id=city_obj.find("option:selected").val();
    var _dist_id=dist_obj.find("option:selected").val();
    var _prov_name=prov_obj.find("option:selected").text();
    var _city_name=city_obj.find("option:selected").text();
    var _dist_name=dist_obj.find("option:selected").text();
    if(_prov_id==undefined||_prov_id==null||_prov_id==""){
        settings.callback("","");
        return;
    }
    //--有省份id，那么判断市的id。
    if(_city_id==undefined||_city_id==null||_city_id==""){
        settings.callback(_prov_id+"",_prov_name);
        return;
    }
    //--有市id，那么判断乡镇id。
    if(_dist_id==undefined||_dist_id==null||_dist_id==""){
        settings.callback(_prov_id+settings.separator+_city_id,_prov_name+settings.separator+_city_name);
        return;
    }
    settings.callback(_prov_id+settings.separator+_city_id+settings.separator+_dist_id,_prov_name+settings.separator+_city_name+settings.separator+_dist_name);
}
        this.getValue=function(){
            var _prov_id=prov_obj.find("option:selected").val();
            var _city_id=city_obj.find("option:selected").val();
            var _dist_id=dist_obj.find("option:selected").val();
            var _prov_name=prov_obj.find("option:selected").text();
            var _city_name=city_obj.find("option:selected").text();
            var _dist_name=dist_obj.find("option:selected").text();
            if(_prov_id==undefined||_prov_id==null||_prov_id==""){
                return "";
            }
            //--有省份id，那么判断市的id。
            if(_city_id==undefined||_city_id==null||_city_id==""){
                return _prov_id;
            }
            //--有市id，那么判断乡镇id。
            if(_dist_id==undefined||_dist_id==null||_dist_id==""){
                return _prov_id+settings.separator+_city_id;
                return;
            }
            return _prov_id+settings.separator+_city_id+settings.separator+_dist_id;
        }
        this.getText=function(){
            var _prov_id=prov_obj.find("option:selected").val();
            var _city_id=city_obj.find("option:selected").val();
            var _dist_id=dist_obj.find("option:selected").val();
            var _prov_name=prov_obj.find("option:selected").text();
            var _city_name=city_obj.find("option:selected").text();
            var _dist_name=dist_obj.find("option:selected").text();
            if(_prov_id==undefined||_prov_id==null||_prov_id==""){
                return "";
            }
            //--有省份id，那么判断市的id。
            if(_city_id==undefined||_city_id==null||_city_id==""){
                return _prov_name;
            }
            //--有市id，那么判断乡镇id。
            if(_dist_id==undefined||_dist_id==null||_dist_id==""){
                return _prov_name+settings.separator+_city_name;
                return;
            }
            return _prov_name+settings.separator+_city_name+settings.separator+_dist_name;
        }

    };
})(jQuery);

调用方式： 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="ajax,jquery,省市联动" />
    <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
    <title>基于jQuery+JSON的省市联动效果</title>
      <style type="text/css">
        .demo{width:80%; margin:20px auto}
        .demo h3{height:32px; line-height:32px}
        .demo p{line-height:24px}
        pre{margin-top:10px; padding:6px; background:#f7f7f7}
    </style>
    <script type="text/javascript" src="/static/lib/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="/static/dic/area.js"></script>
    <script type="text/javascript" src="citySelect.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#city_4").citySelect({
                data:getAreaDic(),
                prov:130000,
                city:130200,
                dist:130207,
                nodata:null,
                required:false
            });

        });
    </script>
</head>

<body>
<div id="header">
    <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
</div>

<div id="main">
    <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-188.html">基于jQuery+JSON的省市联动效果</a></h2>


    <div class="demo">
        <h3>设置省份、城市、地区（县）的默认值</h3>

        <p>三级联动</p>
        <div id="city_4">
            <select class="prov"></select>
            <select class="city" disabled="disabled"></select>
            <select class="dist" disabled="disabled"></select>
        </div>

    </div>

</div>

</body>
</html>

不要忘记要调用一份地区js文件，下面是打包：

http://download.csdn.net/detail/cdnight/6930363

码农下的天桥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值