JQuery选择选项以显示另一个选择选项然后在该第二选择选项上显示数据

Question

我需要帮助。我想创建一个选择选项，它将显示第二个选择选项。使用第二个选择选项，我将在那里选择将在id中显示数据的选项。数据将来自第一个选择选项和第二个选择选项。非常感谢你提前。 。 。 到目前为止，这些是我创建的代码。

students.php

<div class="text-center" align="center">
                        <select id="ch_br_LdSubs" class="form-control" style="width: 200px; text-align: center !important;">
                            <option value="">-- select branch --</option>
                            <option value="MBC">MinSCAT Bongabong Campus</option>
                            <option value="MMC">MinSCAT Main Campus</option>
                            <option value="MCC">MinSCAT Calapan City Campus</option>
                        </select>
                    </div>
                    <div style="margin: 10px;"></div>
                    <div id="printArea">
                        <div class="scroll-x">
                            <div id="branchData"></div>
                        </div>
                    </div>

ajax.js $（文件）。就绪（函数（）{

/* Load the Students for a Specifed Branch and Course */
$('#showStdsByCourse').change(function(){

    var course = $(this).val();
    var branch = $('#ch_br_LdSubs').val();

    $.ajax({

        url: 'actions.php',
        type: 'POST',
        data: {action: 'showStudents', branch: branch, course: course},
        dataType: 'html',
        success: function(result)
        {
            $('studentsData').html(result);
        },
        error: function()
        {
            alert('Failed to load students!');
        }

    });

});

/* Load the Branch Data for a Specified Branch */
$('#ch_br_LdSubs').change(function(){

    var branch = $(this).val();

    $.ajax({

        url: 'actions.php',
        type: 'POST',
        data: {action: 'showBranchData', branch: branch},
        dataType: 'html',
        success: function(result)
        {
            $('#branchData').html(result);
        },
        error: function()
        {
            alert('Failed to load student data!');
        }

    });

});

/* Load the Courses for a Specified Branch */
$('#selectedBranch_loadCourse').change(function(){

    var branch = $(this).val();

    $.ajax({

        url: 'actions.php',
        type: 'POST',
        data: {action: 'loadSubjectsPerBranch', branch: branch},
        dataType: 'html',
        success: function(result)
        {
            $('#loadCourseByBranch').html(result);

        },
        error: function()
        {
            alert('Failed to load courses!');
        }
    });

});

}）;

这是我在我创建的课程上的代码

public function showBranchData($branch) {

        try {

            $stmt = $this->db->prepare("SELECT * FROM students WHERE branch = :branch");
            $stmt->bindparam(':branch', $branch);
            $stmt->execute();

            if ($stmt->rowCount() != null) {
                $branch_data = $stmt->fetch(PDO::FETCH_ASSOC);

                ?>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title"><?php print($branch_data['branch']) ?> Students</h4>
                </div>
                <div class="panel-body">
                    <select id="showStdsByCourse" class="form-control" style="width: 200px">
                        <?php

                            $courses = $this->db->prepare("SELECT * FROM courses WHERE branch = :branch");
                            $courses->bindparam(":branch", $branch);
                            $courses->execute();

                            if ($courses->rowCount() != null) {

                                echo '<option value="">-- select course --</option>';

                                while ($courseData = $courses->fetch(PDO::FETCH_ASSOC)) {

                                    ?>
                        <option value="<?php print($courseData['course_acronym']) ?>"><?php print($courseData['course_name']) ?></option>
                                    <?php

                                }
                            } else {

                                ?>
                        <option value="">-- no courses yet --</option>
                                <?php
                            }

                        ?>
                    </select>
                    <span id="text"></span>
                    <div id="studentsData"></div>
                </div>
            </div>
                <?php

            } else {
                ?>
            <div class="alert alert-danger">
                No student data added yet!
            </div>
                <?php

            }

        } catch (PDOException $ex) {

            echo $ex->getMessage();
            return false;

        }

    }

    public function showStudents($branch, $course) {

        try {

            $stmt = $this->db->prepare("SELECT * FROM students WHERE branch = :branch AND course = :course");
            $stmt->bindparam(":branch", $branch);
            $stmt->bindparam(":course", $course);
            $stmt->execute();

            if ($stmt->rowCount() != null) {
                echo 'Student Data';
            } else {

                ?>
            <div class="alert alert-warning">No student data added yet!</div>
                <?php

            }

        } catch (PDOException $ex) {

            echo $ex->getMessage();
            return false;

        }

    }

Answer 1

有了这些信息，我只能帮助你提供一些想法。您是说什么我会使用JQuery从第一个选择中获取信息以在第二个选择中创建新选项。如果您需要在数据库中搜索新选项的信息，则必须使用Ajax来获取信息。

看看这些问题。它可以帮助你。

What is the best way to add options to a select from as a JS object with jQuery?

Ajax tutorial for post and get