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

Question

这是我正在引用的JS小提琴：

http://jsfiddle.net/fiddleyetu/wKbXx/1/

我最终要做的是修改它，以创建与动态生成的父类别关联的项目数组。 因此，对于此示例，如果用户选择：

<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小提琴中，用户单击时我动态朝着正确的方向前进，但它却变成了一个选择下拉列表。 关于如何实现这一目标的任何建议？ 仅供参考，关联的项目将从数据库数组中提取。

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/
这是带有单选按钮选择而不是复选框选择的版本。