如何通过jQuery（Ajax）获取多个下拉选择框的值并传递至PHP

1. 调整HTML结构 #

给字母选择框添加onchange事件，确保两个下拉框变更时都能触发请求：

<label>Select Number: </label>
<select id="number" onchange="FetchState()" required>
      <option value="0">-- 0 --</option>
      <option value="1">-- 1 --</option>
      <option value="2">-- 2 --</option>
      <option value="3">-- 3 --</option>
</select>

<label>Select letter: </label>
<select id="alphabet" onchange="FetchState()" required>
      <option value="a">-- a --</option>
      <option value="b">-- b --</option>
      <option value="c">-- c --</option>
      <option value="d">-- d --</option>
</select>
<select id="dependent">
</select>

2. 修改JavaScript函数 #

移除原函数的id参数，直接通过jQuery获取两个下拉框的选中值，一并传递给ajax.php：

function FetchState() {
    // 获取两个下拉框的选中值
    const numberVal = $("#number").val();
    const alphabetVal = $("#alphabet").val();
    
    // 清空依赖下拉框
    $("#dependent").html('');

    $.ajax({
        type: "POST",
        url: "ajax.php",
        // 传递两个参数
        data: {
            number: numberVal,
            alphabet: alphabetVal
        },
        success: function(data) {
            // 将返回的选项插入依赖下拉框
            $("#dependent").html(data);
        },
        // 添加错误处理，提升用户体验
        error: function() {
            $("#dependent").html('<option value="">加载失败，请重试</option>');
        }
    });
}

3. PHP端（ajax.php）接收参数示例 #

在ajax.php中接收POST参数，执行数据库查询并返回选项（注意使用预处理语句防止SQL注入）：

<?php
// 安全获取POST参数，避免未定义索引错误
$number = $_POST['number'] ?? '';
$alphabet = $_POST['alphabet'] ?? '';

// 验证参数合法性
if (empty($number) || empty($alphabet)) {
    echo '<option value="">请先选择数字和字母</option>';
    exit;
}

// 此处编写数据库连接与查询逻辑（示例）
// 示例使用PDO预处理防止SQL注入
// $pdo = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');
// $stmt = $pdo->prepare("SELECT id, name FROM your_table WHERE number = ? AND alphabet = ?");
// $stmt->execute([$number, $alphabet]);
// $results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 模拟查询结果，实际替换为数据库返回的数据
echo '<option value="">-- 请选择结果 --</option>';
echo "<option value='result_$number$alphabet'>$number-$alphabet 对应结果1</option>";
echo "<option value='result_$number$alphabet_2'>$number-$alphabet 对应结果2</option>";
?>

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