Question

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

这是我的代码：

<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调用＆＃34;更改＆＃34;第一次下拉事件，即联盟和ajax网址应根据ajax参数（联盟选定值）返回候选人列表。一旦你获得了ajax响应，你可以在＆＃34; Candidates＆＃34;中填写这些值。使用JS / Jquery下拉。

以下是符合您要求的示例代码：

$（＆＃34;＃coalition_id＆＃34;）。change（function（）{

var selected_id = $（this）.val（）;

//应返回候选列表的文件路径（JSON     格式）为＆＃34;联盟＆＃34;通过GET方法传递给此URL的值

var url =＆＃34; path / to / candidates_file.php？coalition =＆＃34; + selected_id;

// ajax call

$。get（，function（json，status）{
           $（＆＃39;＃candidatesselect＆＃39）空（）;

//循环遍历每个值＆amp;填写候选人下拉列表

$。each（json，function（i，item）{

$（＆＃39;＃candidatesselect＆＃39）。追加（             $（＆＃39;＆＃39;，{                 value：item.owner，                 text：item.username             }，＆＃39;＆＃39;））;

}）;

}）;

}）;

根据另一个选定选项在下拉菜单中设置选项

1 个答案: