这是最近在写的一套前端库中的一个组件,支持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);