javascript - 使用数据库制作动态下拉菜单

Question

我一直在尝试找出一种方法，根据用户在第一个下拉列表中的选择来填充数据库中的第二个下拉列表。

到目前为止，CSS Tricks (Dynamic-Dropdowns)这是对我的问题最好、最明确的答案。尽管我无法让我的工作发挥作用。 (有 3 个示例来填充下拉列表，您应该检查页面底部的数据库示例。)

我的 settings.php 中有 2 个下拉菜单，正如教程所示，我创建了另一个 php 文件来打印第二个下拉菜单。

这是 get-dropdown.php:

<script>alert("Here")</script>

<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
$dbConnection = open_connection();

if(isset($_GET['School'])){ $school = mysqli_real_escape_string($dbConnection, $_GET['School']); }

/* This code will print program options from database.
 *
 * If user's program matches with any of the school from database,
 * mark it as "selected" otherwise, use "Select Your Program" as selected.
 *
 * So, "selected" attribute of user's program will overwrite the "selected"
 * attribute of "Select Your Program".
 * */

$query_programs = "SELECT * FROM PROGRAMS WHERE PROGRAM_SCHOOL='$school' ORDER BY PROGRAM_CODE ASC";
$query_users = "SELECT USER_PROGRAM FROM USERS WHERE USER_ID = $user1_id";

$programs_result = mysqli_query($dbConnection, $query_programs) or die(mysqli_error($dbConnection));
$users_result = mysqli_query($dbConnection, $query_users) or die(mysqli_error($dbConnection));

while($data = mysqli_fetch_assoc($users_result)){ $user_program = $data['USER_PROGRAM']; }

foreach($programs_result as $program_result){
    if($user_program == $program_result['PROGRAM_CODE']){
        echo "<option value='$program_result[PROGRAM_CODE]' selected>$program_result[PROGRAM_CODE]</option>";
    }else{
        echo "<option value='$program_result[PROGRAM_CODE]'>$program_result[PROGRAM_CODE]</option>";
    }
}

close_connection($dbConnection);

即使是顶部的警报也不起作用。我把它放在那里，看看它是否会出现在这个页面上。当我从第一个下拉列表中选择另一个选项时，第二个下拉列表变为空。里面什么也没有出现。看起来我在 settings.php 中犯了一个错误，因为警报在上面不起作用。

这是我的settings.php的一部分:

<label>
    <span>School:</span>
    <select class="settings-input" name="school" id="school">
        <option value="Select Your School" disabled selected>Select Your School</option>
        <?php
        /* This code will print school options from database.
         *
         * If user's school matches with any of the school from database,
         * mark it as "selected" otherwise, use "Select Your School" as selected.
         *
         * So, "selected" attribute of user's school will overwrite the "selected"
         * attribute of "Select Your School".
         * */

        $query_schools = "SELECT * FROM SCHOOLS ORDER BY SCHOOL_TYPE ASC";
        $query_users = "SELECT USER_SCHOOL FROM USERS WHERE USER_ID = $user1_id";

        $schools_result = mysqli_query($dbConnection, $query_schools);
        $users_result = mysqli_query($dbConnection, $query_users);

        while($data = mysqli_fetch_assoc($users_result)){ $user_school = $data['USER_SCHOOL']; }

        foreach($schools_result as $school_result){
            if($user_school == $school_result['SCHOOL_NAME']){
                echo "<option value='$school_result[SCHOOL_NAME]' selected>$school_result[SCHOOL_NAME]</option>";
            }else{
                echo "<option value='$school_result[SCHOOL_NAME]'>$school_result[SCHOOL_NAME]</option>";
            }
        }
        ?>
        <option value="Other">Other</option>
    </select>
</label>
<label>
    <span>Program:</span>
    <select class="settings-input" name="program" id="program">
        <option value="Select Your Program" disabled selected>Select Your Program</option>
        <script>
            $("#school").change(function(){
                $("#program").load("./lib/get-dropdown.php?school=" + $("#school").val());
            });
        </script>
    </select>
</label>

非常感谢。

最终修复(我的解决方案)1.我有 $dbConnection = open_connection();连接数据库，但该函数是在另一个文件中定义的，并且连接数据库的必要信息存储在另一个文件中。因此，对于我的 get-dropdown.php 我必须需要这两个文件。这就是我修复数据库连接的方法。2.另一个问题是我将学校名称传递给 get-dropdown.php 但问题是学校名称包含空格，当您尝试传递 get 时这是一个问题。所以这就是我以前通过get value的方式。我添加了encodeURIComponent。

<script>
    $(document).ready(function(){
        $("#school").change(function(){
            $("#program").load("lib/get-dropdown.php?School=" + encodeURIComponent($("#school").val()));
        });
    });
</script>

这些就是问题所在。如果您尝试填充下拉列表并且不了解 javascript，这是最简单的方法。只需一点jquery，你就可以实现它。

Answer 1

最终修复(我的解决方案)1.我有 $dbConnection = open_connection();连接数据库，但该函数是在另一个文件中定义的，并且连接数据库的必要信息存储在另一个文件中。因此，对于我的 get-dropdown.php 我必须需要这两个文件。这就是我修复数据库连接的方法。2.另一个问题是我将学校名称传递给 get-dropdown.php 但问题是学校名称包含空格，当您尝试传递 get 时这是一个问题。所以这就是我以前通过get value的方式。我添加了encodeURIComponent。

<script>
    $(document).ready(function(){
        $("#school").change(function(){
            $("#program").load("lib/get-dropdown.php?School=" + encodeURIComponent($("#school").val()));
        });
    });
</script>

这些就是问题所在。如果您尝试填充下拉列表并且不了解 javascript，这是最简单的方法。只需一点jquery，你就可以实现它。