layui select静态多级联动

在layui中实现静态多级联动可以通过嵌套多个select标签实现。具体步骤如下：

1. 在HTML中定义多个select标签，每个标签都需要设置一个id和一个onchange事件，用于触发级联操作。

<select id="province" onchange="getCity()">
  <option value="">请选择省份</option>
  <option value="北京市">北京市</option>
  <option value="上海市">上海市</option>
  <option value="广东省">广东省</option>
</select>

<select id="city" onchange="getArea()">
  <option value="">请选择城市</option>
</select>

<select id="area">
  <option value="">请选择区域</option>
</select>

2. 在JavaScript中定义对应的级联操作函数，用于根据当前选择的省份和城市，动态生成区域列表。

var cityData = { // 城市数据，可以通过Ajax请求获取
  '北京市': ['东城区', '西城区', '朝阳区', '海淀区'],
  '上海市': ['黄浦区', '徐汇区', '长宁区', '静安区'],
  '广东省': ['广州市', '深圳市', '珠海市', '汕头市']
};

function getCity() {
  var province = document.getElementById('province');
  var city = document.getElementById('city');
  var area = document.getElementById('area');
  var provinceValue = province.value;
  city.innerHTML = '<option value="">请选择城市</option>'; // 清空城市列表
  area.innerHTML = '<option value="">请选择区域</option>'; // 清空区域列表
  if (provinceValue) { // 如果选择了省份
    var cityList = cityData[provinceValue]; // 获取对应的城市列表
    for (var i = 0; i < cityList.length; i++) {
      var option = document.createElement('option');
      option.value = cityList[i];
      option.innerHTML = cityList[i];
      city.appendChild(option); // 动态添加城市列表
    }
  }
}

function getArea() {
  var city = document.getElementById('city');
  var area = document.getElementById('area');
  var cityValue = city.value;
  area.innerHTML = '<option value="">请选择区域</option>'; // 清空区域列表
  if (cityValue) { // 如果选择了城市
    var areaList = areaData[cityValue]; // 获取对应的区域列表
    for (var i = 0; i < areaList.length; i++) {
      var option = document.createElement('option');
      option.value = areaList[i];
      option.innerHTML = areaList[i];
      area.appendChild(option); // 动态添加区域列表
    }
  }
}

3. 在页面加载完成后，调用getCity()函数初始化城市列表。

window.onload = function() {
  getCity();
}

这样，就可以实现一个简单的静态多级联动。需要注意的是，这个示例只是演示了基本思路，实际应用中需要根据具体情况进行适当的修改和扩展。