如何根据第一个Select选中值筛选第二个Select的选项？

看起来你需要做一个级联下拉框——也就是第二个下拉的选项会跟着第一个的选择动态变化，我来一步步帮你搞定这个问题：

1. 先调整前端代码：让第二个下拉框初始只显示默认选项 #

首先把第二个下拉框的PHP循环去掉，只保留默认选项，后面我们用JS动态加载对应选项：

<!-- 第一个科目下拉框（保留原有的循环逻辑） -->
<select name="subject" class="form-control" id="search1">
    <option> select 1 </option>
    <?php foreach( $rs_sub->result() as $rows ) { ?>
        <option value="<?php echo $rows->sub_id; ?>"><?php echo $rows->sub_name; ?></option>
    <?php } ?>
</select>

<!-- 第二个章节下拉框（初始仅保留默认选项） -->
<select name="chapter" class="form-control" id="search2">
    <option> select 2 </option>
</select>

2. 用JS监听第一个下拉的变化，发送请求到后端 #

我们需要用JavaScript（这里用jQuery更简洁）监听第一个下拉框的选择事件，当用户选了某个科目后，把科目ID传给后端，再把返回的章节数据渲染到第二个下拉框里：

$(document).ready(function() {
    // 监听第一个下拉框的选择变化
    $('#search1').change(function() {
        const subId = $(this).val();
        
        // 如果用户选了默认的"select 1"，清空第二个下拉框并恢复默认
        if (!subId) {
            $('#search2').html('<option> select 2 </option>');
            return;
        }
        
        // 发送AJAX请求到后端获取对应章节
        $.ajax({
            url: 'get_chapters.php', // 后端处理脚本的路径
            type: 'POST',
            data: { sub_id: subId }, // 传递选中的科目ID
            dataType: 'json',
            success: function(response) {
                // 清空第二个下拉框，重新添加默认选项
                $('#search2').html('<option> select 2 </option>');
                
                // 循环渲染章节选项
                response.forEach(chapter => {
                    $('#search2').append(`<option value="${chapter.chap_id}">${chapter.chap_name}</option>`);
                });
            },
            error: function() {
                alert('获取章节数据失败，请重试');
            }
        });
    });
});

3. 后端PHP脚本：根据科目ID查询对应章节 #

创建一个get_chapters.php文件，接收前端传过来的科目ID，执行带条件的SQL查询（一定要用预处理语句防SQL注入！），然后返回JSON格式的章节数据：

<?php
// 假设你用的是CodeIgniter框架，和原代码的环境一致
$sub_id = $this->input->post('sub_id');

// 用框架的查询构造器写安全的SQL（自动处理预处理）
$this->db->select('chap_id, chap_name');
$this->db->from('ers_chapters');
$this->db->where('cht_sub_id', $sub_id);
$this->db->group_by('chap_name'); // 保留你原有的分组逻辑

$query = $this->db->get();
$chapters = $query->result_array();

// 返回JSON格式的数据
header('Content-Type: application/json');
echo json_encode($chapters);
?>

如果是原生PHP环境，代码大概是这样（同样要做预处理）：

<?php
// 原生PHP数据库连接示例
$pdo = new PDO("mysql:host=你的主机;dbname=你的库名;charset=utf8", '用户名', '密码');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sub_id = $_POST['sub_id'];
// 预处理查询，避免SQL注入
$stmt = $pdo->prepare("SELECT chap_id, chap_name FROM ers_chapters WHERE cht_sub_id = ? GROUP BY chap_name");
$stmt->execute([$sub_id]);

$chapters = $stmt->fetchAll(PDO::FETCH_ASSOC);

header('Content-Type: application/json');
echo json_encode($chapters);
?>

关键注意事项 #

• SQL注入防护：绝对不要直接把$sub_id拼进SQL语句里，预处理语句是必须的，上面两种写法都做了处理，这是非常重要的安全细节。
• 空值处理：当用户选择第一个下拉的默认选项时，要清空第二个下拉的内容，避免显示错误数据。
• 框架适配：如果用的是CodeIgniter，直接用框架的数据库类就好，不用自己写原生连接，更符合项目规范。

这样调整后，第二个下拉框就会跟着第一个的选择动态加载对应的章节选项啦！

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