使用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>";}