javascript - 通过 php 中的 onchange 过滤数据列表

Question

我是 JavaScript 初学者
我有选择包含类列表和输入的组件，其中包含mysql表中的数据列表name

这是我的简单代码:

<select class="form-control" name="class" id="class" onchange="" value="--">
    <option>--</option>
    <option>X NET 1</option>
    <option>X NET 2</option>
    <option>XI NET 1</option>
    <option>XI NET 2</option>
</select>
<input type="text" class="form-control" name="name" id="name" list="checkName" autocomplete="off" required>
<datalist id="checkName">
    <?php
        $sql_siswa = "SELECT name,class from student order by name;";
        $result = $conn->query($sql_siswa);
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()){
                echo "<option value=\"".$row["name"]."\">";
            }
        }
    ?>
</datalist>

所以，我希望如果我选择类(class)，数据列表将从 php 的过滤器中按类(class)检索姓名学生。 这里的过滤是这样的:

$sql_siswa = "SELECT name from student where class like '".$_POST["class"]."' order by name;";
$result = $conn->query($sql_siswa);
if ($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        echo "<option value=\"".$row["name"]."\">";
    }
}

如何在onchange中实现这个过滤器？ 抱歉，我没有尝试任何事情，因为我不知道该怎么做。

Answer 1

你应该尝试 ajax 来做到这一点

<select class="form-control" name="class" id="class" onchange="ajax_change(this.value)" >
<option value="">--</option>
<option value="X NET 1">X NET 1</option>
<option value="X NET 2">X NET 2</option>
<option value="XI NET 1">XI NET 1</option>
<option value="XI NET 2">XI NET 2</option>
</select>

在你的脚本中

function ajax_change(str){
 $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: {class: str},
        success: function (data) {            
           $("#checkName").html(data);
        },
        error: function (xhr) {
           //Do Something to handle error
           alert("some error found");
        }
    });
 }

在你的 ajax.php 中

//include connection
if(isset($_POST["class"])){
$sql_siswa = "SELECT name from student where class like '".$_POST["class"]."' order by name;";
$result = $conn->query($sql_siswa);
if ($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        echo "<option value=\"".$row["name"]."\">";
    }
 }
}