layui select+PHP读取mysql数据库如何实现下拉框6级8级联动？
数据库结构：
读取数据库生成json数组，data.php
$db=mysqli_connect("localhost","root","123456","test");
$result=mysqli_query($db,"select * from protype",MYSQLI_USE_RESULT);
$rs=mysqli_fetch_all($result,MYSQLI_ASSOC);
mysqli_free_result($result);
mysqli_close($db);
$s=json_encode($rs);
echo "var arrType=". $s;
?>
如下demo.html目前可以实现三级联动，如何更改为6级或8级联动？
demo.html
html>
<html>
<head>
<meta charset="utf-8">
<title>layui select 联动示例title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 10px;}
style>
head>
<body>
<form class="layui-form" method="get">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">种类label>
<div class="layui-input-block">
<select id="sType"lay-filter="sType">
<option value="">请选择种类option>
select>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">品名label>
<div class="layui-input-block">
<select id="sProType"lay-filter="sProType">
<option value="">请选择品名option>
select>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">地区label>
<div class="layui-input-block">
<select id="sArea"lay-filter="sArea">
<option value="">请选地区option>
select>
div>
div>
///////新增5个下拉框
<div class="layui-inline">
<label class="layui-form-label">总监label>
<div class="layui-input-block">
<select id="director"lay-filter="director">
<option value="">请选总监option>
select>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">一线经理label>
<div class="layui-input-block">
<select id="manager1"lay-filter="manager1">
<option value="">请选一线经理option>
select>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">二线经理label>
<div class="layui-input-block">
<select id="manager2"lay-filter="manager2">
<option value="">请选二线经理option>
select>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">主管label>
<div class="layui-input-block">
<select id="supervisor"lay-filter="supervisor">
<option value="">请选主管option>
select>
div>
div>
<div class="layui-inline">
<label class="layui-form-label">组长label>
<div class="layui-input-block">
<select id="groupleader"lay-filter="groupleader">
<option value="">请选组长option>
select>
div>
div>
div>
form>
<script src="../src/layui.js">script>
<script src="data.php">script>
<script>
/////////////数据源及构造级联数据结构：如下如何由3级改为8级？
var kvType = {};
Array.from(new Set(arrType.map(i => i.种类))).forEach(种类 => {
var 品名s = Array.from(new Set(arrType.filter(i => i.种类 == 种类).map(i => i.品名))).map(i => ({ 品名: i }));
kvType[种类] = { };
品名s.forEach(i => {
kvType[种类][i.品名]= arrType.filter(x => x.种类 == 种类 && x.品名 == i.品名).map(i => i.地区);
});
});
/////////////如下如何同步由3级改为8级联动？
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form, $ = layui.$, sType = $('#sType'), sProType = $('#sProType'), sArea = $('#sArea');
sType.append(Object.keys(kvType).map(i => ``).join(''));
form.on('select(sType)', function (data) {
sProType[0].length = 1;
if (data.value != '') sProType.append(Object.keys(kvType[data.value]).map(i => ``).join(''));
form.render('select');
});
form.on('select(sProType)', function (data) {
sArea[0].length = 1;
if (data.value != '') sArea.append(kvType[sType.val()][data.value].map(i => ``).join(''));
form.render('select');
});
form.render("select");
});
script>
body>
html>
我不太明白你的描述，不过，涉及多下拉框的操作我是操作过，所以写回答了。
LayUI实现多下拉框的操作比较简单，比如：点击前一个下拉框，执行的操作如下：初始化其他要关联的下拉框，然后分别根据选择去赋值。
//监听样式列表的点击事件
form.on('select(styleList)', function(data){
let curSelectStyleName = data.value; //选择的样式名称
$.ajax({
url:'ZTBCommon.php',
data:{
"OP":"getSubClassList",
"styleName":curSelectStyleName,
},
type:'POST',
success:function (JsonData) {
$('#Dc03').empty();
$('#Dc07').empty();
for(var i=0;i<JsonData.data.length;i++){
$('#Dc07').append(new Option(JsonData.data[i].c02, JsonData.data[i].c02));
}
form.render('select');
}
});
});
上面是我做一个程序时写的，供参考，多个也一样，不过程序是可以优化的，就是封装AXAJ请求为一个函数，这样嵌套就不复杂了，也可以使用promise对象。
https://blog.csdn.net/dawn0718/article/details/124700916，这是我使用PHP+LayUI写一个合同系统的总结，供参考。