PHP+ajax+layui实现双重列表的动态绑定

以下是一个简化的PHP+Ajax+Layui实现双重列表动态绑定的示例代码：

PHP端代码（get\_right\_options.php）：




<?php
// 假设这是从数据库获取选项的逻辑
$leftOptions = [
    ['id' => 1, 'name' => '选项A'],
    ['id' => 2, 'name' => '选项B'],
    // ...
];
$rightOptions = [
    // 根据左边选中的选项动态获取
];
 
// 返回JSON数据
echo json_encode([
    'leftOptions' => $leftOptions,
    'rightOptions' => $rightOptions
]);
?>

HTML和JavaScript代码：




<!DOCTYPE html>
<html>
<head>
    <title>双重列表示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"  media="all">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
 
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">左边列表</label>
        <div class="layui-input-block">
            <select name="left" xm-select="left" xm-select-skin="normal" xm-select-search="" xm-select-search-select="">
                <!-- 左边选项将被动态插入 -->
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">右边列表</label>
        <div class="layui-input-block">
            <select name="right" xm-select="right" xm-select-skin="normal" xm-select-search="" xm-select-search-select="">
                <!-- 右边选项将被动态插入 -->
            </select>
        </div>
    </div>
</form>
 
<script>
layui.use('form', function(){
    var form = layui.form;
});
 
$(document).ready(function(){
    // 初始化左边列表
    $.ajax({
        url: 'get_right_options.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var leftSelect = $('[xm-select=left]');
            leftSelect.html(''); // 清空原有选项
            $.each(data.leftOptions, function(index, item) {
                leftSelect.append($('<option>').text(item.name).attr('value', item.id));
            });
            form.render('select'); // 更新左边列表的Layui样式
            
            // 初始化右边列表，这里应根据实际逻辑获取
            var rightSelect = $('[xm-select=right]');
            rightSelect.html(''); // 清空原有选项
            $.each(data.rightOptions, function(index, item) {
                rightSelect.append($('<option>').text(item.name).attr('value', item.id));
            });
            form.render('select'); // 更新右边列表的Layui样式
        }
    });
 
    // 监听左边列表选择变化，动态更新

PHP+ajax+layui实现双重列表的动态绑定

评论已关闭

推荐阅读