layui select PHP读取mysql数据库联动示例

layui select 联动示例,数据结构如下

layui select PHP读取mysql数据库联动示例

思路:读取这个表的数据生成js数组(用json_encode将读取的数据转成json数组字符串),用js处理下数组的种类,品名成唯一的,给select添加change事件读取对应的数据,然后更新select的option后重新render下更新下UI。效果如下

layui select PHP读取mysql数据库联动示例

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数据库联动示例

评论(0)Web开发网
阅读(54)喜欢(0)JavaScript/Ajax开发技巧