layui三级联动_layui三级联动下拉框

解决方案

在使用layui框架进行页面开发时，三级联动下拉框是一种常见的需求。它能够实现省、市、区的级联选择，或者任何具有层级关系的数据展示与选择功能。通过layui提供的form模块和接口请求数据，可以方便地构建出响应式且美观的三级联动效果。

方案一：基于本地JSON数据的三级联动

1. 准备工作

确保已经引入了layui的相关文件，包括CSS和JS。然后准备一个包含所有层级关系的JSON文件或直接在页面中定义好数据结构。

html
<!-- 引入layui -->
</p>



<p>

2. HTML结构

创建三个select元素用于显示各级选项。
```html

所在地区

</p>

<h3>3. JavaScript代码</h3>

<p>编写js逻辑来处理联动效果。这里以静态json数据为例：
```javascript
layui.use(['form'], function(){
  var form = layui.form;
  var provinces = [
    {"id":1,"name":"北京","cities":[{"id":101,"name":"北京市"},{"id":102,"name":"昌平区"}]},
    {"id":2,"name":"上海","cities":[{"id":201,"name":"上海市"},{"id":202,"name":"浦东新区"}]}
  ];</p>

<p>// 渲染省份
  var provinceSelect = document.getElementById('province');
  for(var i=0; i<provinces.length; i++){
    var option = document.createElement('option');
    option.value = provinces[i].id;
    option.innerText = provinces[i].name;
    provinceSelect.appendChild(option);
  }
  form.render('select');</p>

<p>// 省份变化事件监听
  form.on('select(province)', function(data){
    var selectedProvinceId = data.value;
    var citySelect = document.getElementById('city');
    citySelect.innerHTML = ''; // 清空城市选项
    var districtSelect = document.getElementById('district');
    districtSelect.innerHTML = ''; // 清空区县选项
    form.render('select'); // 重新渲染select</p>

<pre><code>// 根据选中的省份ID获取对应的城市列表并渲染
for(var i=0; i<provinces.length; i++){
  if(provinces[i].id == selectedProvinceId){
    var cities = provinces[i].cities;
    for(var j=0; j<cities.length; j++){
      var option = document.createElement('option');
      option.value = cities[j].id;
      option.innerText = cities[j].name;
      citySelect.appendChild(option);
    }
    break;
  }
}
form.render('select');

});

// 城市变化事件监听
form.on('select(city)', function(data){
var selectedCityId = data.value;
var districtSelect = document.getElementById('district');
districtSelect.innerHTML = ''; // 清空区县选项
form.render('select'); // 重新渲染select

// 这里可以根据实际需求添加区县数据的获取逻辑
// 示例中假设每个城市只有一个区县
var option = document.createElement('option');
option.value = selectedCityId + '01';
option.innerText = '默认区县';
districtSelect.appendChild(option);
form.render('select');

});
});

方案二：基于Ajax动态加载数据

如果数据量较大或者数据需要从服务器端获取，则可以采用Ajax的方式动态加载数据。这种方式不仅提高了页面的性能，还能保证数据的实时性。

1. 修改HTML部分保持不变

2. 修改JavaScript代码如下：

```javascript
layui.use(['form', 'jquery'], function(){
var form = layui.form;
var $ = layui.jquery;

// 渲染省份
$.getJSON('/api/provinces', function(res){
var provinceSelect = $('#province');
provinceSelect.empty();
res.data.forEach(function(item){
provinceSelect.append(''+item.name+'');
});
form.render('select');
});

// 省份变化事件监听
form.on('select(province)', function(data){
var selectedProvinceId = data.value;
var citySelect = $('#city');
citySelect.empty(); // 清空城市选项
var districtSelect = $('#district');
districtSelect.empty(); // 清空区县选项
form.render('select');

$.getJSON('/api/cities?provinceId='+selectedProvinceId, function(res){
  res.data.forEach(function(item){
    citySelect.append('<option value="'+item.id+'">'+item.name+'</option>');
  });
  form.render('select');
});

});

// 城市变化事件监听
form.on('select(city)', function(data){
var selectedCityId = data.value;
var districtSelect = $('#district');
districtSelect.empty(); // 清空区县选项
form.render('select');

$.getJSON('/api/districts?cityId='+selectedCityId, function(res){
  res.data.forEach(function(item){
    districtSelect.append('<option value="'+item.id+'">'+item.name+'</option>');
  });
  form.render('select');
});

});
});
```
以上两种方法都可以实现layui框架下的三级联动下拉框功能，开发者可以根据实际情况选择合适的方式来满足项目需求。

// 来源：https://www.nzw6.com