n级联动下拉菜单组件

这是最近在写的一套前端库中的一个组件，支持n级联动的下拉菜单，在这里跟大家分享一下。

使用方法如下：

<div id="test">
  <p>省份：<select></select></p>
  <p>城市：<select></select></p>
  <p>商家：<select></select></p>
</div>
<script>
(function(){
    $("#test").linkage({"山东":{"济南":["济南祥福","济南信达通福"],"青岛":["青岛六和","青岛成浩达"]},"江苏":{"南京":["南京福联","南京长福新港"],"苏州":["苏州豪骏","苏州新佳"]}});
})();
</script>

linkage函数写为zepto对象的一个方法，参数只有一个，即下拉菜单的数据，为json格式。这里html中select标签需要开发人员手写，是为了联动框的样式可以让开发人员灵活掌控。需要注意的是目标div中select标签数量要与json数据的层数相同。如果结合json生成工具，前端开发人员将会很方便的生成各种复杂的n级联动框。

下面为js代码：

! function($) {
    // 构造函数，参数data为json格式数据，参数_this为当前的zepto对象
    var Linkage = function(data, _this) {
        this.data = data;
        this.build(_this);
    };
    Linkage.prototype = {
        build: function(_this) {
            var self = this;
            // 获取_this对象内所有的select对象
            var select_obj = $(_this).find("select");
            // 获取_this对象内所有的select对象的数量
            var select_num = $(select_obj).size();
            // 构建第一层select数据
            this._resetSelect($(select_obj).eq(0));
            this._renderSelect(this.data, $(select_obj).eq(0), 1);
            // 逐层绑定change事件
            $(select_obj).each(function(index, element) {
            // 如果到了最后一层，则不需要绑定change事件，跳出循环
            if (index + 1 == select_num) {
                return false;
            };
            // 绑定change事件
            $(element).change(function() { 
                // 清空当前select的所有子层select数据
                for (var i = index + 1; i < select_num; i++) {
                    self._resetSelect($(select_obj).eq(i));
                };
                // 如果当前层select数据不为空，则填充下一层select数据
                if ($(element).val()) {
                    // 如果是最后一层type为2，否则type为1
                    var type = (index + 2 == select_num) ? 2 : 1;
                    // 构建下一层data
                    var _data = self.data;
                    for (var i = 0; i < index + 1; i++) {
                        _data = _data[$(select_obj).eq(i).val()];
                    };
                    self._renderSelect(_data, $(select_obj).eq(index + 1), type);
                };
            });
        });
    },
    // 填充select数据
    _renderSelect: function(data, select, type) {
        $.each(data, function(i, n) {
            switch (type) {
            case 1:
                // 非最后一层
                select.append("<option value='" + i + "'>" + i + "</option>");
                break;
            case 2:
                // 最后一层
                select.append("<option value='" + n + "'>" + n + "</option>");
                break;
            default:
            };
        });
    },
    // 清空select数据
    _resetSelect: function(select) {
        select.empty();
        select.append("<option value=''></option>");
    }
  };
  function Plugin(data) {
      var linkage = new Linkage(data, this);
  };
  $.fn.linkage = Plugin;
}(window.Zepto);

 

转载于:https://www.cnblogs.com/yangjiewu/p/4655130.html