基于级联选择的SQL中的PHP动态复选框列表

我自愿为我的学校建立了一个数据库，以便有效地跟踪学生的不当行为。我不是专家。我一直在做的是，我在谷歌上搜索我想要的东西，自学成才，并尝试将所有东西缝合在一起

我遇到了本教程，这正是我想要的，我基于以下内容对数据库进行了研究：

因此，我得出以下结论：

整个想法是基于对班级的选择，特定班级的学生将以列表的形式出现

整个事情目前正在进行，但我想把它推到另一个层次。正如你所看到的，我写的东西一次只允许一个学生，如果我想让多个学生因为同样的错误行为同时被选中，该怎么办

我在谷歌上搜索了“动态复选框”等，但不知何故，我不知道如何将它们链接起来，以使其工作。。。我试了又试，这就是为什么你发现我在这里问

代码（ace_beta.php）：

主页运行在：ace_beta.php；其中我认为我被困在这个地方：

<td width="25%" valign="top"'>

<table border="0" width="100%" cellpadding="6">
<tr>
<td width="100%" align="middle" valign="top" bgcolor='#636363'>
<font face="Arial" size='5' color='#ffffff'><b> STEP ONE </b></font>
</td></tr></table>

<br />
<b> STUDENT INFORMATION ::. </b>
<br />

<table border="0" width="100%" cellpadding="3">

<tr>
<td width="20%" align="right"> class </td>
<td width="80%" align="left">
    <select id="class" name="class">
        <?php echo $opt->ShowClass(); ?>
    </select></td>
</tr>

<tr>
<td width="20%" align="right"> student </td>    
<td width="80%" align="left">
    <select id="student" name="student">
         <option value="0">choose...</option>
         </select></td>
</tr>

</table>

</td>

---

首先，您需要将数据库查询分离到一个类中，该类包含一个到数据库的连接。要得到这个，你需要一个

我把你的代码改了一点。现在看起来更简单了，是吗

class SelectList
{

    /**
     * Get class list
     *
     * @return array
     */
    public function getClass()
    {
        $sql = "SELECT * FROM class";
        $res = Database::getInstance()->query($sql);

        return $res;
    }

    /**
     * Get list of students from $classId
     *
     * @param int $classId class students from
     *
     * @return array
     */
    public function getStudent($classId)
    {
        $sql = "SELECT * FROM student WHERE id_cls= ?";

        $res = Database::getInstance()->query($sql, array($classId));

        return $res;
    }

}

这是您更改的
ace_beta.php

<!--
 considering you are have form that looks like
 <form method="post" action="ace_beta.php">


 and somewhere you are have submit button :)
-->

<td width="25%" valign="top">

    <table border="0" width="100%" cellpadding="6">
        <tr>
            <td width="100%" align="middle" valign="top" bgcolor='#636363'>
                <font face="Arial" size='5' color='#ffffff'><b> STEP ONE </b></font>
            </td></tr></table>

    <br />
    <b> STUDENT INFORMATION ::. </b>
    <br />

    <table border="0" width="100%" cellpadding="3">

        <tr>
            <td width="20%" align="right"> class </td>
            <td width="80%" align="left">
                <select id="class" name="class">
                    <option value="0">choose...</option>
                    <?php foreach ($opt->getClass() as $class): ?>
                        <option value="<?php echo $class['id_cls'] ?>"><?php echo $class['name'] ?></option>
                    <?php endforeach; ?>
                </select>
            </td>
        </tr>

        <tr>
            <td width="20%" align="right"> student </td>
            <td width="80%" align="left">
                <div id="students">

                </div>
            </td>
        </tr>

    </table>

</td>

include 'select.class.php';
$opt = new SelectList();

// watch if there are any GET request coming with `class=ID`
if (isset($_GET['class'])) {
    $result = $opt->getStudent($_GET['class']);
    // header for JSON
    header('Content-type: application/json');
    // output JSON (need php 5.2 at least)
    echo json_encode($result);
}

添加到页面底部的某个地方

<!-- this just in case you are have no jQuery yet. -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // when you slect new item.
        $('#class').change(function(){
            $.ajax({
                // go to url with ?class=ID
                url: '//get_students.php?class=' + $(this).val(),
                dataType: 'json'
                // when all is ok:
                success: function(data){
                    var studentsContainer = $('#students');
                    // empty checkboxes.
                    studentsContainer.html('');

                    // iterate throug data
                    $.each(data, function(index, item) {
                        // create new checkobx
                        var checkbox = $('<input type="checkbox" name="students[]" />');
                        // assign value and id for it.
                        checkbox.attr('value', item.id)
                                .attr('id', 'student_' + item.id);

                        // create a label with name inside
                        var label = $('<label />');
                        label.attr('for', 'student_' + item.id);
                        label.html(item.name);

                        // append all of new elements and "<br />" for readability.
                        studentsContainer.append(checkbox);
                        studentsContainer.append(label);
                        studentsContainer.append('<br />');
                    });
                }
            });
        });
    });
</script>


$（文档）.ready（函数（）{
//当你挑选新物品时。
$（'#类'）。更改（函数（）{
$.ajax({
//使用？class=ID转到url
url:'//get_students.php？class='+$（this.val（），
数据类型：“json”
//一切正常时：
成功：功能（数据）{
var studentsContainer=$（“#students”）；
//空复选框。
studentscocontainer.html（“”）；
//遍历数据
$。每个（数据、功能（索引、项目）{
//创建新的checkobx
var复选框=$（''）；
//为其分配值和id。
checkbox.attr（'value'，item.id）
.attr（'id'、'student_'+item.id）；
//创建一个内有名称的标签
变量标签=$（''）；
label.attr（'for'、'student_'+item.id）；
html（item.name）；
//附加所有新元素和“
”以便于阅读。
studentscocontainer.append（复选框）；
学生容器。附加（标签）；
studentscocontainer.append（“
”）；
});
}
});
});
});

上述javascript将创建以下HTML：

<input type="checkbox" name="students[]" value="1" id="student_1" /><label for="student_1" /><br />
<input type="checkbox" name="students[]" value="2" id="student_2" /><label for="student_2" /><br />
<input type="checkbox" name="students[]" value="3" id="student_3" /><label for="student_3" /><br />








我还没有测试所有这些，但希望这有助于让你在正确的方向
 我很乐意帮助你，这是一个经过深思熟虑的问题，我感谢你所付出的时间和努力。只是一些澄清问题。您想显示
列表而不是
？感谢您这么快的响应！理想情况下，我希望它会显示一个复选框列表（您之前建议的），其中包含从数据库中提取的学生姓名。。。谢谢，祝你有一个幸福的圣诞节……）像这样的吗？如果是的话，看看这个令人惊叹的项目：@sdespont-不完全是我想的，这远远超出我的能力范围；我在找更简单的东西。不过，谢谢！稍后我将发布一个插图。@sdesport-我希望实现的是下面的图片（photoshopped xD）：非常感谢您的帮助。我试着应用上面的代码，做了一些修改，不知怎么的，班级名单不再生成了（为了得到学生名单）。。。我会继续玩弄它。。。同时还在考虑其他的可能性。。。再次感谢！
<!-- this just in case you are have no jQuery yet. -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // when you slect new item.
        $('#class').change(function(){
            $.ajax({
                // go to url with ?class=ID
                url: '//get_students.php?class=' + $(this).val(),
                dataType: 'json'
                // when all is ok:
                success: function(data){
                    var studentsContainer = $('#students');
                    // empty checkboxes.
                    studentsContainer.html('');

                    // iterate throug data
                    $.each(data, function(index, item) {
                        // create new checkobx
                        var checkbox = $('<input type="checkbox" name="students[]" />');
                        // assign value and id for it.
                        checkbox.attr('value', item.id)
                                .attr('id', 'student_' + item.id);

                        // create a label with name inside
                        var label = $('<label />');
                        label.attr('for', 'student_' + item.id);
                        label.html(item.name);

                        // append all of new elements and "<br />" for readability.
                        studentsContainer.append(checkbox);
                        studentsContainer.append(label);
                        studentsContainer.append('<br />');
                    });
                }
            });
        });
    });
</script>

<input type="checkbox" name="students[]" value="1" id="student_1" /><label for="student_1" /><br />
<input type="checkbox" name="students[]" value="2" id="student_2" /><label for="student_2" /><br />
<input type="checkbox" name="students[]" value="3" id="student_3" /><label for="student_3" /><br />