Question

我正在尝试制作成绩分布网站，并且我创建4个下拉列表，关联主题（cs，数学等），类（数据结构，AI等），教授和上课的四分之一。选择季度下拉列表后，我想显示带有数据的条形图。

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

仅供参考，我使用这些选择器：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在未设置<Button Width="100" Height="25" Content="Press me!"> <Button.Style> <Style TargetType="{x:Type Button}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/> <Setter Property="RenderTransform"> <Setter.Value> <ScaleTransform ScaleX="1.2" ScaleY="1.2"/> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </Button.Style> </Button>的情况下执行，您永远不会将用户选择的主题发布到页面上;如果你没有发出额外的POST请求，那么这些课程就无法填充。

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

RenderTransformOrigin

因此，当主题选择触发$_POST["subject"]事件时，我们会将所选主题发布到当前页面。响应应该是填充了类选择时生成的整个文档（因为设置了$('#subject').on('change', function(){ $.post({ data: { subject: $(this).val() }, success: function (data) { var classes = $(data).find("#class"); $("#class").replaceWith(classes); } }); });）。

然后，我们将当前页面的change select元素替换为生成数据中的版本（包含在$_POST["subject"]中，以便从字符串化HTML中创建DOM元素，所以我们可以使用#class）。

另一种方法可能是拥有文件，$()，find()等，并分别对其进行POST（您发出第一个请求getSubjects.php，以及后续请求{{1 }}）。这样，您只需将生成的getClasses.php元素附加到页面上的onload元素即可。

还：在数据库查询中使用之前，请请清理onchange。用户可以使用option的恶意字符串轻松地在本地选择中添加虚假选项，并且您在不知不觉中使用该字符串查询数据库。您可以为此使用预准备语句（mysqli具有select函数来在查询之前准备语句）。 More on that and combating SQL injection here

第二次依赖下拉并没有填满数据

1 个答案: