n级联动下拉菜单组件

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

使用方法如下：

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

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

下面为js代码：

! function($) {
  //构造函数，参数data为json格式数据，参数that为当前的zepto对象
  var Linkage = function(data) {
    this.data = data;
  };
  Linkage.prototype = {
    build: function(that) {
      var _this = this;
      //获取that对象内所有的select对象
      var $select_obj = $(that).find("select");
      //获取that对象内所有的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++) {
            _this._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 = _this.data;
            for (var i = 0; i < index + 1; i++) {
              _data = _data[$select_obj.eq(i).val()];
            };
            _this._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.append("<option value=‘" + i + "‘>" + i + "</option>");
        };
      });
    },
    //清空select数据
    _resetSelect: function(select) {
      select.empty();
      select.append("<option value=‘‘></option>");
    }
  };
  function Plugin(data) {
    var linkage = new Linkage(data);
    linkage.build(this);
  };
  $.fn.linkage = Plugin;
}(window.Zepto)