我有一个从数据库数组中填充的列表,如下所示:
$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>
好的,现在,var valu = this.value;
脚本中的js
正在显示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传递此值,并获取与该类别值相关联的项目数组以显示在输出列表中。
答案 0 :(得分:0)
我想你想做的是这样的事情:
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();
}
}
});
});
DEMO:http://jsfiddle.net/2Yz8j/3/
希望这有帮助。