jQuery 省市区多级(三级/四级/五级。。。)联动 BY 凨来了

简介: /** * 省市县区三级多级联动 * author:凨来了 */jQuery(function($) { var city=[],cityName=[]; $.fn.city = function (opt) { var $id = $(this), options = $.extend({ u
/**
 * 省市县区三级多级联动
 * author:凨来了
 */
jQuery(function($) {
    var city=[],cityName=[];
    $.fn.city = function (opt) {
        var $id = $(this),
            options = $.extend({
                url: 'data.php?parent_id=',
                /*当前ID,设置选中状态*/
                selected: null,
                /*上级栏目ID*/
                parent_id: null,
                /*主键ID名称*/
                valueName: "id",
                /*名称*/
                textName: "cn_name",
                /*默认名称*/
                defaultName: "-----",
                /*下级对象ID*/
                nextID: null}, opt),selected,_tmp;
        if(options.parent_id==null){
            _tmp=$id.data('parent_id');
            if(_tmp!==undefined){
                options.parent_id=_tmp;
            }
        }
        //初始化层
        this.init = function () {
            if($.inArray($id.attr('id'),cityName)==-1){
                cityName.push($id.attr('id'));
            }
            if(!options.selected){
                options.selected=$id.data('selected');
            }
            $id.append(format(get(options.parent_id)));
        };
        function get(id) {
            if (id !== null && !city[id]) {
                getData(id);
                return city[id];
            }else if (id !== null && city[id]) {
                return city[id];
            }
            return [];
        }

        function getData(id) {
            $.ajax({
                url: options.url+ id,
                type: 'GET',
                async: false,
                success: function (d) {
                    if (d.status == 'y') {
                        city[id] = d.data;
                    }
                }
            });
        }

        function format(d) {
            var _arr = [], r, selected = '';
            if (options.defaultName !== null) _arr.push('<option value="">' + options.defaultName + '</option>');
            if ($.isArray(d)) for (var v in d) {
                r = null;
                r = d[v];
                selected = '';
                if (options.selected && options.selected == (r[options.valueName])) {
                    selected = 'selected';
                }
                _arr.push('<option value="' + r[options.valueName] + '" ' + selected + '>' + r[options.textName] + '</option>');
            }
            return _arr.join('');
        }

        this.each(function () {
            options.nextID && $id.on('change', function () {
                var $this = $('#' + options.nextID),id=$(this).attr('id'),i=$.inArray(id,cityName);
                $this.html(format(get($(this).val())));
                if ($.isArray(cityName)) for (var v in cityName) {
                    if(v>(i+1)){
                        $('#'+cityName[v]).html(format());
                    }
                }
            });
        });
        this.init();
    }
});

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery 省市区多级(三级/四级/五级。。。)联动 BY 凨来了</title>
</head>
<body><dl>
    <dt>所在地区:</dt>
    <dd>
        <select id="province" name="province" class="form-control city-select" data-selected="10" data-parent_id="0"></select>
        <select id="city" name="city" class="form-control city-select" data-selected="112" data-parent_id="10"></select>
        <select id="county" name="county" class="form-control city-select" data-selected="1387" data-parent_id="112"></select>

    </dd>
</dl>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="city.js"></script>
<script type="text/javascript">
    $(function(){
        $('#province').city({nextID:'city'});
        $('#city').city({nextID:'county'});
        $('#county').city();
    });
</script>
</body>
</html>
demo下载
目录
相关文章
|
8月前
|
JavaScript 前端开发
前端基础 - JQuery实现省级联动
前端基础 - JQuery实现省级联动
35 0
|
JavaScript
jquery 实现 table 和 标题 的联动显示
jquery 实现 table 和 标题 的联动显示
105 0
jquery 实现 table 和 标题 的联动显示
|
JavaScript
jQuery多级联动美化版Select下拉框
在线演示 本地下载
1242 0
|
JSON JavaScript API
jQuery cxSelect 联动下拉菜单
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84111643 插件简介 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。
1333 0
|
JavaScript PHP 数据格式
jQuery实现省市区三级联动完整版源码演示下载
HTML 首先引入jquery库和cityselect插件。 <  type="text/ " src="jquery.js">  <  type="text/ " src="jquery.cityselect.js"> 然后在#city区域里放三个下拉select,对应class为:prov、city、dist,分别表示省、市、区。
1408 0
|
JavaScript
Jquery联动下拉菜单
用Jquery 1.4.4 实现的联动下拉菜单,估计在Jquery 1.2版本以上都可用。 联动下拉菜单是一主一从两个select,切换主select时,从select的内容跟着改变。这里是把从select的项目按组optgroup全部加载进来,然后切换主select时更新从select组的显示或者隐藏。
861 0
|
JSON JavaScript 前端开发
|
8月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
40 0