根据另一个选择的选项设置下拉菜单中的选项

Question

下面我有两个下拉菜单。一个从数据库中获取“联盟”列表，另一个获取“候选人”列表。我要做的是根据第一个选择的联盟在第二个下拉菜单中列出候选人。基本上在第二个下拉菜单中列出/设置处于同一联盟中的候选人。问题是我无法首先从“联盟”菜单中获取所选项目，然后使用该值设置第二个。

这是我的代码：

<form action ="includes/admin.users.inc.php" method="POST">
    <div style = "display: inline-block;">
    <!-- the coalitions -->

        <select class="form-control" id = "coalition_id" name ="coalition_select" method="POST">
        <option value="" selected disabled>Coalitions</option>
            <?php 
                include_once 'includes/dbh.inc.php';
                $sql_coalition = mysqli_query($conn, "SELECT coalition FROM candidates");
                while ($row = $sql_coalition->fetch_assoc()) {
                    echo "<option value=\"\">" . $row['coalition'] . "</option>";
                }
                global $coalition_select;
                echo $coalition_select = $_POST['coalition_select'];
            ?>
        </select>
    </div>
    <div style = "display: inline-block;">
        <!-- the users -->
        <select class="form-control">
            <option value="" selected disabled>Candidates</option>
            <?php 
                include_once 'includes/dbh.inc.php';
                $sql = mysqli_query($conn, "SELECT username FROM candidates WHERE coalition = '$coalition_select'");
                while ($row = $sql->fetch_assoc()) {
                    echo "<option value=\"owner1\">" . $row['username'] . "</option>";
                }
            ?>
        </select>
    </div>
</form>

我查看了一些处理类似情况但没有成功的示例。这两个菜单分别运行良好，因此问题不在于连接。请注意，我希望在不按下任何按钮的情况下执行此操作。

谢谢

Answer 1

由于 php 是服务器端代码，因此您无法在 php 部分（用于第二个下拉菜单）中获取第一个下拉列表的选定值。

要根据第一个下拉菜单的选择填充第二个下拉菜单，您需要使用 ajax。

对第一个下拉菜单的“更改”事件进行 ajax 调用，即 Coalitions 和 ajax url 应该根据 ajax 参数（Coalitions 选择值）返回候选人列表。一旦你得到 ajax 响应，你就可以使用 JS/Jquery 在“候选人”下拉列表中填写这些值。

以下是应满足您要求的示例代码：

$( "#coalition_id" ).change(function() {

var selected_id = $(this).val();

// 应该返回候选列表的文件的路径（JSON format ) 用于通过 GET 方法传递给此 url 的 "coalition" 值

var url = "path/to/candidates_file.php?coalition=" + selected_id;

//ajax调用

$.get(, function(json, status){
$('#candidatesselect').empty();

// 遍历每个值并填写候选下拉列表

$.each(json, function(i, item) {

$('#candidatesselect').append( $('', { 值：item.owner， 文本：item.username }, ''));

});

});

});