layui select PHP读取mysql数据库联动示例
layui select 联动示例，数据结构如下
思路：读取这个表的数据生成js数组（用json_encode将读取的数据转成json数组字符串），用js处理下数组的种类，品名成唯一的，给select添加change事件读取对应的数据，然后更新select的option后重新render下更新下UI。效果如下
data.php
<?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
<!DOCTYPE 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>
</div>
</form>
<script src="../src/layui.js"></script>
<!----注意改数据源路径---->
<script src="data.php"></script>
<script>
/////////////数据源及构造级联数据结构
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.地区);
});
});
/////////////
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form, $ = layui.$, sType = $('#sType'), sProType = $('#sProType'), sArea = $('#sArea');
sType.append(Object.keys(kvType).map(i => `<option>${i}</option>`).join(''));
form.on('select(sType)', function (data) {
sProType[0].length = 1;
if (data.value != '') sProType.append(Object.keys(kvType[data.value]).map(i => `<option>${i}</option>`).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 => `<option>${i}</option>`).join(''));
form.render('select');
});
form.render("select");
});
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：layui select PHP读取mysql数据库联动示例