layui二级联动_layui多级联动

在Web开发中，实现表单元素之间的联动效果（如省市区选择、类别分级等）是非常常见的需求。layui作为一个流行的前端UI框架，提供了简单易用的select组件来实现这种联动效果。介绍如何使用layui实现二级和多级联动，并提供完整的代码示例。

解决方案

要实现layui的二级或更多级别联动，核心思路是：当用户选择上级选项时，通过AJAX请求或JavaScript逻辑动态更新下一级选项的内容。我们可以利用layui提供的form.on('select')监听器来捕捉选择变化事件，并结合$.ajax()或本地数据源来填充下级选项。

基于本地数据的二级联动

这是最简单的实现方式，所有数据都预先定义好并存储在页面中。适合数据量较小且固定的场景。

html
<!-- HTML结构 -->

</p>




layui.use(['form'], function(){
  var form = layui.form;

  // 省份数据
  var provinces = [
    {value: '1', text: '广东省'},
    {value: '2', text: '江苏省'}
  ];

  // 城市数据
  var cities = {
    "1": [{value: '101', text: '广州市'}, {value: '102', text: '深圳市'}],
    "2": [{value: '201', text: '南京市'}, {value: '202', text: '苏州市'}]
  };

  // 渲染省份
  $.each(provinces, function(index, item){
    $('#province').append(`${item.text}`);
  });
  form.render('select');

  // 监听省份变化
  form.on('select(province)', function(data){
    var selectedProvince = data.value;
    var $citySelect = $('#city');
    $citySelect.empty().attr('disabled', false);

    if(cities[selectedProvince]){
      $.each(cities[selectedProvince], function(index, city){
        $citySelect.append(`${city.text}`);
      });
    }

    form.render('select');
  });
});


<p>

基于Ajax异步加载的多级联动

对于数据量较大或者需要实时获取数据的情况，建议采用Ajax方式从服务器端动态获取数据。

html


</p>


layui.use(['form'], function(){
  var form = layui.form;

  // 获取级数据
  $.getJSON('/api/getLevel1Data', function(res){
    $.each(res.data, function(index, item){
      $('#level1').append(`${item.name}`);
    });
    form.render('select');
  });

  // 监听选择变化
  function loadNextLevel(levelId, nextLevelId){
    $(`#${nextLevelId}`).empty().attr('disabled', true);
    if(!levelId) return;

    $.getJSON(`/api/getLevelData?parentId=${levelId}`, function(res){
      if(res.data.length > 0){
        $.each(res.data, function(index, item){
          $(`#${nextLevelId}`).append(`${item.name}`);
        });
        $(`#${nextLevelId}`).removeAttr('disabled');
      }
      form.render('select');
    });
  }

  form.on('select(level1)', function(data){
    loadNextLevel(data.value, 'level2');
  });

  form.on('select(level2)', function(data){
    loadNextLevel(data.value, 'level3');
  });
});


<p>