javascript - 第二个相关下拉列表未填充数据

Question

我正在尝试制作一个成绩分布网站，我正在创建 4 个下拉菜单，这些下拉菜单与主题(cs、数学等)、类(class)(数据结构、AI 等)、教授和类(class)的四分之一相关采取。选择季度下拉列表后，我想显示包含数据的条形图。

我遇到的问题是我无法用数据填充第二个下拉列表 基本上，我可以成功地从数据库中为第一个下拉列表提取数据，如果用户选择了某些内容然后第二个下拉列表(最初使用 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选择元素(包装在$()中以创建DOM来自字符串化 HTML 的元素，因此我们可以使用 find())。

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

另外:在数据库查询中使用它之前，请请清理$_POST["subject"]。用户可以使用 value 的恶意字符串轻松地在本地选择中添加虚假选项，而您会在不知不觉中使用它查询数据库。您可以为此使用准备好的语句(mysqli 具有 prepare() 函数来在查询之前准备语句)。 More on that and combating SQL injection here .