Codeigniter MVC下多下拉框联动筛选表格数据不叠加问题咨询

问题原因 #

你的代码存在3个核心问题导致筛选条件无法叠加：

1. 视图中<tbody>标签未添加id="table_body"，你写的DOM选择器$('tbody#table_body')无法匹配到元素，筛选后的表格内容无法正常渲染
2. AJAX请求路径错误：你的控制器筛选方法名为ajax_lists，但JS代码中请求的路径是ajax_dropdown，请求无法命中对应方法
3. 仅修改了第一个下拉框的请求参数，第二个contact_type下拉框的change事件依然只传递自身选中值，未同时传递source下拉的选中值

修复步骤 #

1. 修改视图HTML代码 #

给tbody添加id，同时给两个下拉框添加共同的筛选类名，简化后续JS逻辑：

<!-- 下拉框部分修改 -->
<select id="your_id_name" class="filter-select">
<!-- 原有option不变 -->
</select>

<select id="contact_type" class="filter-select">
<!-- 原有option不变 -->
</select>

<!-- tbody部分修改 -->
<tbody id="table_body">
<?php 
// 原有循环渲染逻辑不变
if(isset($records) && count($records) > 0)
{
    foreach($records as $row ){
?>
<tr>
    <td><?= $row->source ?></td>
    <td><?= $row->title ?></td>
</tr>
<?php } } ?>
</tbody>

2. 替换原有JS逻辑 #

删除原来两个单独的change事件，替换为统一的筛选事件，每次请求同时传递两个下拉框的当前选中值：

<script type="application/javascript">
$('.filter-select').on('change', function() {
    // 同时获取两个下拉的当前选中值
    const selectedSource = $('#your_id_name').val();
    const selectedContactType = $('#contact_type').val();

    // 注意替换下方路径中的【控制器名】为你实际的控制器类名小写
    $.get('<?php echo base_url('控制器名/ajax_lists'); ?>', {
        selected: selectedSource,
        selected_contact: selectedContactType
    }, function(res) {
        const values = JSON.parse(res);
        const records = values.records;
        let html = "";
        records.forEach(function(row){
            html += `<tr>
                <td>${row.source}</td>
                <td>${row.title}</td>
            </tr>`;
        });
        $('#table_body').html(html);
    })
})
</script>

3. 控制器与模型代码无需修改 #

你原有控制器和模型的条件拼接逻辑是正确的，当两个筛选参数都传递到后端时，会自动叠加WHERE条件实现多维度筛选，空值（All选项）会自动跳过对应筛选条件。

内容的提问来源于stack exchange，提问作者JJM50