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

使用AJAX，PHP和MYSQL填充依赖下拉列表

1 个答案: