基于另一个下拉菜单的所选选项设置下拉菜单中的选项

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。

在第一个dropdown ie联盟的"change“事件上执行ajax调用，ajax url将根据ajax参数(联盟选定值)返回候选人列表。获得ajax响应后，可以使用JS/Jquery将这些值填充到“Candidate”下拉列表中。

以下是能够满足您的需求的示例代码：

函数$( "#coalition_id“).change(

(){

.val selected_id =$(This) var ()；

//通过GET方法传递给该url的联合值应返回候选列表(JSON格式)的文件路径

var url =“路径/到/候选人文件.php?selected_id=”+var；

// ajax调用

$.get(，函数(json，状态){

$('#candidatesselect').empty()；

//循环遍历每个值并填充候选项下拉列表

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

$('#candidatesselect').append( $(''，{ value: item.owner，text: item.username }，''))；

})；

})；

});