LayUI SELECT 多级级联实现,理论上是无限级的


数据是异步获取的,每次只获取一级,数据格式:

[{"id":1,"family":"1,","isleaf":"false","value":"安徽省","children":null,"parent":0},{"id":124,"family"
:"124,","isleaf":"false","value":"福建省","children":null,"parent":0},{"id":219,"family":"219,","isleaf"
:"false","value":"甘肃省","children":null,"parent":0}]

HTML代码:

<div class="layui-form-item">
  <label class="layui-form-label">地区</label>
  <input type="hidden" class="state" value="" name="state_id" family=""/>      
</div>

注:编辑状态时候,给input的value和family赋值就行

JS代码:

  var url =  '/web/state'; //数据请求地址

  //加载州/地区/城市选择
  $.each($(".state"), function(i, e){
    buildMultiState(e);  
  });
  
  //生成多选择
  function buildMultiState(e, family) {
    var _self = $(e);
                
    if(null == family) {
      if(typeof(_self.attr("family")) == "undefined") {
        return;   
      }
      family = _self.attr("family");
      if("" == family) {
        _self.val("");
      }
    }
        
    if("" == _self.val()) {
      $.getJSON(url, function(json){
        var select = "<div class=\"layui-input-inline\"><select lay-filter=\"state\">";
        select += "<option value=\"0\">请选择 </option>";
        $(json).each(function(){
          select += "<option family=\"" + this.family + "\" value=\"" + this.id + "\" >" + this.value + "</option>";
        });
        select += "</select></div>";
        _self.after(select);
        
        form.render('select');
      });
      
      return;
    }
    
    var familys = family.split(",");
    
    $.each(familys, function(k, v){
      if(null != v && "" != v) {
        var url = 0 == k ? url : url + "?id=" + familys[k-1];
        $.getJSON(url, function(json){
          var select = "<div class=\"layui-input-inline\"><select lay-filter=\"state\">";
          select += "<option value=\"0\">请选择 </option>";
          $(json).each(function(){
            select += "<option value=\"" + this.id + "\"";
            if(v == this.id) {
              select += " selected=\"selected\" ";
            }
            select += ">" + this.value + "</option>";
          });
          select += "</select></div>";
          _self.after(select);
          
          form.render('select');
        });
      }      
    });    
  }
  
  form.on('select(state)', function(data){    
    var _self = $(data.elem);
    var state = _self.closest("div").siblings(".state").eq(0);
    
    /*重新清理后面元素*/
    if(null != _self.closest("div").nextAll()) {
      _self.closest("div").nextAll().each(function(){
        this.remove();
      });
    }
    
    if(0 == _self.val()) {
      return;
    }
    
    $.getJSON(url + "?id=" + _self.val(), function(json){
      if(null != json && eval(json).length != 0) {      
        state.val("");
        state.attr("family", "");      
        var select = "<div class=\"layui-input-inline\"><select lay-filter=\"state\">";
        select += "<option value=\"0\">请选择 </option>";
        $(json).each(function(){
          select += "<option family=\"" + this.family + "\" value=\"" + this.id + "\">" + this.value + "</option>";
        });
        select += "</select></div>";
        _self.closest("div").after(select);      
      } else {
        state.val(_self.val());
        state.attr("family", _self.find("option:selected").attr("family"));
      }
      
      form.render('select');
    });    
  });

效果:


李胜松博客



白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论