第二个依赖下拉列表没有填充数据

Question

我正在尝试创建一个成绩分布网站，我正在创建 4 个下拉菜单，这些下拉菜单与学科（cs、数学等）、班级（数据结构、人工智能等）、教授和班级所在的季度相关采取。选择季度下拉菜单后，我想显示一个包含数据的条形图。

我遇到的问题是我无法用数据填充第二个下拉列表基本上，我可以成功地从数据库中为第一个下拉列表提取数据，如果用户选择了某些内容然后第二个下拉列表（最初使用 jquery 隐藏）变得可见，但它没有正确地从数据库中提取数据并将其作为选项添加到第二个下拉列表中。例如，我可以从第一个下拉列表中选择计算机科学，然后第二个下拉列表可见，但其中不包含“编程简介”、“数据结构”等；相反，它只是空白。

仅供参考，我正在使用这些选择器：http://silviomoreto.github.io/bootstrap-select/

PHP（错误很可能出现在 getClasses 函数的某个地方，很可能是代码的 $_POST 部分）：

<?php   

function getSubjects()
{   
    /* Get mysql connect information from external file and connect*/
    require_once 'database.php'; 
    $connection = new mysqli($db_hostname, $db_username, $db_password, $db_database);
    if($connection->connect_error) die ($connection->connect_error);

    /* Get the column containing the subjects from the table */
    $query = 'SELECT DISTINCT Subject FROM gradelist ORDER BY Subject';
    $result = $connection->query($query);

    if(!$result) die ($connection_error);

    /* Keep track of the number of rows in the column; necessary for iterating */
    $rows = $result->num_rows;

    /* selectBar keeps track of the html code for the select Bar*/
    $selectBar = '';

    for($j = 0; $j < $rows; $j++)
    {
        $result->data_seek($j);
        $value = $result->fetch_assoc()['Subject'];
        $selectBar .= '<option>' . $value .'</option>';     
    }

    $result->close();
    $connection->close();

    return $selectBar;
}


function getClasses()
{
    $connection = new mysqli($db_hostname, $db_username, $db_password, $db_database);
    if($connection->connect_error) die ($connection->connect_error);

    if(isset($_POST['subject']))
    {
        $query = "SELECT DISTINCT Class FROM gradelist WHERE Subject = $subject";
        $result = $connection->query($query);
        if(!$result) die ($connection_error);
    }
    else
    {
        die($connection_error);
    }

    $rows = $result->num_rows;

    for($j = 0; $j < $rows; $j++)
    {
        $result->data_seek($j);
        $value = $result->fetch_assoc()['Class'];
        $selectBar .= '<option value = "' . $value . '">' . $value .'</option>';        
    }
    $result->close();
    $connection->close();

    return $selectBar;
}   ?>

代码的 HTML 部分（同样，错误可能与代码的 $_POST 部分有关）：

            <form class="form-horizontal" method = "post" role="form">
                <div class="form-group">
                  <div class="col-lg-10">
                    <select name = "subject" id="subject" class="selectpicker show-tick form-control" data-live-search="true" title ="Subject">
                        <?php echo getSubjects(); ?>
                    </select>
                  </div>
                </div>
            </form>


              <form class="form-horizontal" method = "get" role="form">
                <div class="form-group">
                  <div class="col-lg-10">
                    <select name = "class" id="class" class="selectpicker show-tick form-control" data-live-search="true" title ="Class">
                        <?php if(isset($_POST['subject'])) echo getClasses(); ?>
                    </select>
                  </div>
                </div>
              </form>

jQuery：

$(document).ready(function() {

$('#class').selectpicker('hide');
$('#professor').selectpicker('hide');
$('#quarter').selectpicker('hide');
});

$('#subject').on('change', function(){
    $('#class').selectpicker('refresh');
    $('#class').selectpicker('show');
});
$('#class').on('change', function(){
    $('#professor').selectpicker('show');
});
$('#professor').on('change', function(){
    $('#quarter').selectpicker('show');
});
$('#quarter').on('change', function(){
    showTable();
    temp = $('#class').selectpicker('val') + " with " + $('#professor').selectpicker('val') + " during " + $('#quarter').selectpicker('val');
    $('#displayName').text(temp);
});

Answer 1

您的 PHP 是在未设置 $_POST["subject"] 的情况下执行的，并且您从未将用户选择的主题发布到页面；如果您不发出额外的 POST 请求，则无法填充类。

一种方法（不更改任何文件）是这样的：

$('#subject').on('change', function(){
    $.post({
        data: { subject: $(this).val() },
        success: function (data) {
            var classes = $(data).find("#class");
            $("#class").replaceWith(classes);
        }
    });
});

因此，当在主题选择上触发change 事件时，我们会将所选主题发布到当前页面。响应应该是填充了类选择后生成的整个文档（因为设置了$_POST["subject"]）。

然后我们将当前页面的#class选择元素替换为生成数据中的版本（包装在$()中以从字符串化的HTML创建DOM元素，因此我们可以使用find() )。

另一种方法可能是拥有文件，getSubjects.php、getClasses.php 等，然后分别向它们 POST（您发出第一个请求 onload，然后发出后续请求 onchange）。这样，您只需将生成的option 元素附加到页面上的select 元素即可。

还：请请在数据库查询中使用$_POST["subject"] 之前对其进行清理。用户可以使用value 的恶意字符串轻松地在本地选择中添加虚假选项，并且您会在不知不觉中使用该字符串查询数据库。您可以为此使用准备好的语句（mysqli 有 prepare() 函数在查询之前准备语句）。 More on that and combating SQL injection here.