使用下拉菜单实时过滤数据：CodeIgniter + AJAX 教程

$route['ajax_dropdown'] = 'your_controller/your_function'; // 将 ajax_dropdown 替换为你想要的路由名称

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Your_controller extends CI_Controller {

    public function your_function()
    {
        $input_value = $this->input->get('your_input_name'); // 获取 jQuery GET 请求传递的参数值
        $data = array(); // 用于存储数据的数组

        // 根据 $input_value 查询数据库，获取过滤后的数据
        // 示例：
        // $this->load->model('Your_model');
        // $data['filtered_records'] = $this->Your_model->get_filtered_records($input_value);

        // 将数据转换为 JSON 格式并输出
        echo json_encode($data);
    }
}
?>

<table>
    <tr>
        <th width="10%">Source</th>
    </tr>
    <tr>
        <td width="5%">
            <select id="your_id_name">
                <option value="">All</option>
                <?php if ($sources) foreach ($sources as $source) : ?>
                    <option value="<?php echo $source['title'] ?>"><?php echo $source['title'] ?></option>
                <?php endforeach; ?>
            </select>
        </td>
    </tr>
    <tbody id="table_body">
        <?php
        if (isset($records) && count($records) > 0) {
            foreach ($records as $row) {
        ?>
                <tr>
                    <td><?= $row->source ?></td>
                </tr>
        <?php }
        }  ?>
    </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() { // 确保页面加载完成后执行
        $('#your_id_name').on('change', function() {
            var selectedValue = $(this).val(); // 获取选中的下拉菜单值

            $.get('<?php echo base_url('ajax_dropdown'); ?>', {
                your_input_name: selectedValue // 将选中的值作为参数传递给服务器
            }, function(res) {
                var values = JSON.parse(res); // 将 JSON 字符串转换为 JavaScript 对象

                // 更新表格数据
                var tableBody = $('#table_body');
                tableBody.empty(); // 清空表格

                // 假设 values 是一个包含过滤后数据的数组
                if (values && values.length > 0) {
                    $.each(values, function(index, row) {
                        var newRow = '<tr><td>' + row.source + '</td></tr>'; // 根据实际数据结构构建表格行
                        tableBody.append(newRow); // 将新行添加到表格
                    });
                } else {
                    tableBody.append('<tr><td colspan="1">No data found.</td></tr>'); // 显示没有数据的提示
                }
            });
        });
    });
</script>