javascript - 根据在第一个选择框中选择的值，将数据库表中的选项带入第二个选择框中

Question

我搜索了很多关于这个主题的内容，发现困难的方法大多不起作用。我有 2 个选择框 (class & student) 应该是动态生成的。选择类(class)后，第二个选择框应显示学生表中的选项值。

<form action="" class="form-horizontal" method="POST">
<h4>Issue Book: </h4><hr>

    <label class="control-label" for="class">Class</label>
    <select id="class" name="class" class="form-control">
    <option value="">Select Class</option>
    <?php
        $class_query = "SELECT * FROM `classes` ";
        $class_result = mysql_query($class_query);
        do{
            $class_row = mysql_fetch_array($class_result);
            if($class_row){
                $class_id = $class_row['id'];
                $class_name = $class_row['class'];
    ?>
    <option value="<?php echo $class_id; ?>"><?php echo $class_name; ?></option>
    <?php
            }
        }while($class_row);
    ?>
    </select>

    <label class="control-label" for="student">Student</label>
    <select id="student" name="student" class="form-control">
    <option value="">Select Student</option>
    </select>

    <!-- Submit -->
    <button type="submit" name="issue_book">Issue Book</button>
</form>

请帮忙解决这个问题，我不了解 JS 或 JQuery。我将非常感激。

Answer 1

首先这是你的html代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="" class="form-horizontal" method="POST">
<h4>Issue Book: </h4>
<hr>

<label class="control-label" for="class">Class</label>
<select id="class" name="class" class="form-control" onchange="getStudentOption(this)">
    <option value="">Select Class</option>
    <option value="class1">Class 1</option>
    <option value="class2">Class 2</option>
    <option value="class3">Class 3</option>
    <option value="class4">Class 4</option>
</select>

<label class="control-label" for="student">Student</label>
<select id="student" name="student" class="form-control">
    <option value="">Select Student</option>
</select>

<!-- Submit -->
<button type="submit" name="issue_book">Issue Book</button>
</form>

添加了一个onchange函数

<script>
function getStudentOption(input) {
    var class_name = input.value;
    $.ajax({
        type: "GET",
        data: 'class=' + class_name,
        url: 'demo.php',
        dataType: 'text',
        success: function (text) {
            $('#student').html(text);
        },
    });
}
</script>

这里的 demo 是文件名，该文件为您提供所有学生数据，因此您也可以更改此文件名和路径

这是你的演示文件内容

  <?php
 if (isset($_GET) && ($_GET['class'] != '')) {

/*$class_value = $_GET['class'];
$query = "SELECT * FROM students  WHERE  class_name=" . $class_value;
$result = mysql_query($query);
$total_refs = mysql_num_rows($result);
if ($total_refs > 0) {
    ?>

    <option value="">Select Student</option>

    <?php
    while ($line = mysql_fetch_array($result)) {
        $student_name = $line['student_name'];
        $student_id = $line['student_id'];

        ?>
        <option
            value="<?php echo $student_id; ?>"><?php echo $student_name; ?></option>

        <?php
    }

    ?>

    <?php
} else { ?>

    <option value="">Select Student</option>

<?php
}*/?>
<option value="">Select Student</option>
<option value="1">Student 1</option>
<option value="2">Student 2</option>
<option value="3">Student 3</option>
<?php }
?>

我已经添加了一些演示内容你可以更新我添加的代码的数据，我不确定你的表结构是什么所以只更新条件值和归档值