需要通过 javascript 和 php 从选中的项目中提取数据库信息

Question

我有一个从数据库数组中填充的列表，如下所示：

$i = 0;
foreach ($category_label as $value) {
echo '<input id="'.$category_label[$i].'" type="checkbox" name="q1" value="'.$category_label[$i].'">
<label for="'.$category_label[$i].'">'.$category_label[$i].'</label><br />';
$i++;  

如您所见，这会从数据库数组中构建一个带有复选框的项目列表。下一步是，如果用户选择其中一个复选框，我需要显示一个新的关联项目数组。这是我已经开始执行此操作的 javascript 和关联的<div>：

JS：

$(function() {
    $('input[name=q1]').on('change', function () {
        var valu = this.value;
            if (this.checked) {
                    $('#q2').append("<li><a href='#'>" + valu + "</a></li>");
                    $('#question2').show();
            } else {
                var lis = $("#q2").find('li');
                lis.each(function () {
                if ($(this).text() === valu) {
                    $(this).remove();
                }
            });

            if (lis.length === 0) {
                $('#question2').hide();
            }
        }
    });
 });

相关PHP：

<div id="question2" class="question">
<p>Results:</p>
<ul id="q2"></ul>
</div>

好的，现在，js 脚​​本中的var valu = this.value; 正在显示question2 div 中的选定项。相反，我需要从选中的项目中获取类别 id 值，然后拉出所有具有关联父类别的子项目来填写列表。如何修改我的 php 和 js 来做到这一点？

---

更新：

这个问题得到了一些反馈，认为它太宽泛了。让我进一步说明问题以找到一个好的解决方案。我修改了第一个 PHP 脚本，将所选项目中的类别 ID 作为值拉入输入项目。这是更新：

 echo '<input id="'.$category_label[$i].'" type="checkbox" name="q1" value="'.$category_id[$i].'"><label for="'.$category_label[$i].'">'.$category_label[$i].'</label><br />';

现在，我只需要找到一种方法通过 javascript 传递此值，并获取与该类别值关联的项目数组以显示在输出列表中。

Answer 1

我猜你想做的是这样的：

HTML：

<input id="101" type="checkbox" name="q1" value="aaa">
<label for="101">category A</label><br />

<input id="102" type="checkbox" name="q1" value="bbb">
<label for="102">category B</label><br />

<input id="103" type="checkbox" name="q1" value="ccc">
<label for="103">category C</label><br />

<div id="question2" class="question">
    <p>Results:</p>
    <ul id="q2"></ul>
</div>

JavaScript：

$(function () {
    $('input[name=q1]').on('change', function () {

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

        if ($(this).is(':checked')) {
            $('#q2').append("<li><a href='#'>" + valu + "</a></li>");
            $('#question2').show();
        } else {
            var lis = $("#q2").find('li');
            lis.each(function () {
                if ($(this).text() === valu) {
                    $(this).remove();
                }
            });

            if (lis.length === 0) {
                $('#question2').hide();
            }
        }
    });
});

演示：http://jsfiddle.net/2Yz8j/3/

希望这会有所帮助。