javascript - 使用 AJAX、PHP 和 MYSQL 填充依赖下拉列表

Question

我正在尝试根据另一个 id='classes' 的下拉菜单的值填充一个 id='gymnasts' 的下拉菜单。

我知道我必须使用 AJAX，但是在学习了多个不同的教程之后，我似乎无法让上述第二个下拉列表显示任何选项。

我的代码如下:

reports.php:

<script>
function getGymnasts(val){
    alert('gets');
    $.ajax({
        type:"POST",
        url:"ajax_populate.php",
        data: 'classid='+val,
        success: function(data){
            $("$gymnasts").html(data);
        }
    });
}
</script>
<form method="post">
    <table>
    <tr><td>Select Class:</td><td><select id="classes" onChange="getGymnasts(this.value)" placeholder="Select Class" required/>
            <?php $classes = mysqli_query($GLOBALS['link'], "SELECT * FROM classes;");
            foreach($classes as $class){
                echo('
                    <option value="'.$class['id'].'">'.$class['level'].'</option>
                ');
            }?>
        </select></td></tr>

    <tr><td>Select Gymnast:</td><td>
        <select id="gymnasts" placeholder="Select Gymnast" required/>

        </select></td></tr>


    <tr><td>Report:</td><td><textarea name="body" cols="60" rows="20" placeholder="Report text" required/></textarea></td></tr>
    <tr><td>Progression Grade:</td><td><input type="text" name="progression" placeholder="A" required/></td></tr>
    <tr><td>Effort Grade:</td><td><input type="text" name="effort" placeholder="A" required/></td></tr>
    <tr><td></td><td><input type="submit" name="saveReport" value="Save"><input type="submit" name="savesendReport" value="Save and Send"></td></tr>
    </table>
</form>

ajax_populate.php

include('dbconnect.php');
$classid = $_POST['classid'];

$sql = "SELECT * FROM gymnasts WHERE classid = '$classid'";
       $result = mysqli_query($GLOBALS['link'], $sql);
$msg ='';
        if (mysqli_num_rows($result) > 0){
            while ($row = mysqli_fetch_array($result))
            {
           $msg ='<option value="'. $row["id"] .'">'. $row["name"] .'</option>';
            }
        }
        else{$msg .="No Gymnasts were found!";}
        echo ($msg);
        mysqli_close($GLOBALS['link']);

请帮忙!

Answer 1

您为 gymnasts id 使用了错误的选择器，在您的成功回调中使用 # 而不是 $

success: function(data){
     $("#gymnasts").html(data);
     // ^ change $ to # here
}

此外，如果没有找到结果，请做出选择

else{$msg .="<option>No Gymnasts were found!</option>";}