Question

这是我引用的JS小提琴：

我最想做的是修改它以创建与动态生成的父类别相关联的项目数组。所以......对于这个例子，如果用户选择：

<li class="list"><input type="checkbox" name="q1" value="Kitchen"/> Kitchen</li>

然后他们会在列表中获得与厨房相关的项目列表：

 <ul>
 <li><a href="#">Cup</a></li>
 <li><a href="#">Spoon</a></li>    
 <li><a href="#">Wine</a></li>
 <li><a href="#">Salsa</a></li>
 <li><a href="#">Oven</a></li>     
 </ul>

在JS Fiddle中，看起来我正朝着正确的方向前进，在用户点击时动态的元素数量，但它将其变为选择下拉列表。关于如何实现这一目标的任何建议？仅供参考，相关项目将从数据库阵列中提取。

Answer 1

将select更改为ul是您尝试实现的目标。我尝试简化并使其看起来一致，例如根据checkbox添加/删除确切的元素。

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

JSFiddle

Answer 2

在您的代码中，您生成<option>个元素并将其附加到<select>。这将创建一个下拉菜单。

如果您希望它输出带有复选框的列表...那么您只需要更改您在页面中插入的HTML。

http://jsfiddle.net/wKbXx/5/
在这里我更改了它，以便代替问题2下的<select>而不是<ul>，并且当您选择问题1中的项时，jquery代码会动态生成并插入<li>元素。这个你想要的？将其与原始代码进行比较，您会看到它基本相同，但使用<li>代替<option>。

编辑：
http://jsfiddle.net/wKbXx/6/
这是一个选择单选按钮而不是复选框选择的版本。

如何更改脚本以输出ul而不是选择选项？

2 个答案: