如何从数组动态创建复选框列表?

布莱恩·J

我通过遍历每个数组项并相应地分配属性,使用数组创建了一个菜单项列表。

现在,我需要为li菜单中的每个项目添加一个复选框我所做的尝试是通过添加输入li标签来添加类型为checkbox的输入但这会创建一个输入框的菜单列表。

问题:

如何从数组动态创建复选框列表?

这是我在脚本中用来创建菜单的当前代码:

    //Bind the country name list in sub menu
    var countries = ['United States', 'Canada', 'Argentina', 'Armenia'];
    var assetList = $('#assetNameMenu')
    $.each(countries, function(i)
    {
        var li = $('<li/>')
            .addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(assetList);
        var aaa = $('<a/>')
            .addClass('ui-all')
            .text(countries[i])
            .appendTo(li);
        var input = $('<input/>')
            .addClass('ui-all')
            .attr('role', 'checkbox')
            .appendTo(aaa);

    });



            <li>
                <a>All <span class="arrow">&#9660</span></a>
                <ul class="sub-menu" id="assetNameMenu">
                   @* li elements created in script *@
                </ul>
            </li>

这将创建以下没有复选框的内容:

在此处输入图片说明

相反,其目的是动态创建复选框项目列表:

               <li>
                    <a>Default <span class="arrow">&#9660</span></a>
                    <ul class="sub-menu" id="assetNameMenu">
                        <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Option 1</a></li>
                        <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Option 2</a></li>
                        <li><a href="#" class="small" data-value="option3" tabindex="-1"><input type="checkbox" />&nbsp;Option 3</a></li>
                        <li><a href="#" class="small" data-value="option4" tabindex="-1"><input type="checkbox" />&nbsp;Option 4</a></li>
                        <li><a href="#" class="small" data-value="option5" tabindex="-1"><input type="checkbox" />&nbsp;Option 5</a></li>
                        <li><a href="#" class="small" data-value="option6" tabindex="-1"><input type="checkbox" />&nbsp;Option 6</a></li>
                    </ul>
                </li>

这将在下面创建:

在此处输入图片说明

斯蒂格

只需为输入设置正确的类型并更改订单:

$.each(countries, function(i)
    {
        var li = $('<li/>')
            .addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .appendTo(assetList);

        var input = $('<input/>')
            .addClass('ui-all')
            .attr('type', 'checkbox')
            .appendTo(li);

       var aaa = $('<a/>')
            .addClass('ui-all')
            .text(countries[i])
            .appendTo(li);

    });

在此处输入图片说明

Codepenhttps : //codepen.io/anon/pen/oLmQRp

更新

用于显示:

.sub-menu {
 width: auto;
 [...]
}

.sub-menu li a { 
  text-align: left;
  [...]
}

范例https : //codepen.io/anon/pen/JKxwoO

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何创建复选框列表

来自分类Dev

如何通过在列表C#中传递复选框名称来在Winform上创建动态复选框?

来自分类Dev

如何通过在列表C#中传递复选框名称来在Winform上创建动态复选框?

来自分类Dev

将每个动态创建的复选框数组连接到其自己的逗号分隔列表

来自分类Dev

如何遍历使用QStandardItemModel创建的复选框的动态创建列表?

来自分类Dev

动态创建两列复选框列表

来自分类Dev

Coldfusion从动态表单复选框创建数组

来自分类Dev

如何根据复选框数据属性值创建动态数组

来自分类Dev

编写动态复选框列表,如何提交复选框?

来自分类Dev

(VBA)如何从动态创建的复选框中检索选定的复选框数据

来自分类Dev

如何从动态创建的复选框javascript制作复选框事件

来自分类Dev

我正在从列表中动态创建复选框,现在如何检查用户从android中的列表中选择了哪个复选框

来自分类Dev

如何查找是否已选中动态创建的复选框

来自分类Dev

如何检查是否已选中“动态创建”复选框?

来自分类Dev

如何保存动态创建复选框的更改状态

来自分类Dev

如何检查是否已选中“动态创建”复选框?

来自分类Dev

Javascript:如何从“动态”创建的复选框中获取值

来自分类Dev

如何使用Dojo创建复选框列表?

来自分类Dev

如何在Rails中呈现复选框的数组/列表?

来自分类Dev

如何使用React Mozilla表单创建复选框数组?

来自分类Dev

动态列表复选框问题

来自分类Dev

动态列表复选框问题

来自分类Dev

Kivy语言动态复选框列表

来自分类Dev

Thymeleaf 列表中的动态复选框

来自分类Dev

在JavaScript中动态创建复选框

来自分类Dev

知道复选框是动态创建的-Django

来自分类Dev

在UIWebView中创建动态复选框

来自分类Dev

在JavaScript中动态创建复选框

来自分类Dev

动态创建唯一的复选框

Related 相关文章

  1. 1

    如何创建复选框列表

  2. 2

    如何通过在列表C#中传递复选框名称来在Winform上创建动态复选框?

  3. 3

    如何通过在列表C#中传递复选框名称来在Winform上创建动态复选框?

  4. 4

    将每个动态创建的复选框数组连接到其自己的逗号分隔列表

  5. 5

    如何遍历使用QStandardItemModel创建的复选框的动态创建列表?

  6. 6

    动态创建两列复选框列表

  7. 7

    Coldfusion从动态表单复选框创建数组

  8. 8

    如何根据复选框数据属性值创建动态数组

  9. 9

    编写动态复选框列表,如何提交复选框?

  10. 10

    (VBA)如何从动态创建的复选框中检索选定的复选框数据

  11. 11

    如何从动态创建的复选框javascript制作复选框事件

  12. 12

    我正在从列表中动态创建复选框,现在如何检查用户从android中的列表中选择了哪个复选框

  13. 13

    如何查找是否已选中动态创建的复选框

  14. 14

    如何检查是否已选中“动态创建”复选框?

  15. 15

    如何保存动态创建复选框的更改状态

  16. 16

    如何检查是否已选中“动态创建”复选框?

  17. 17

    Javascript:如何从“动态”创建的复选框中获取值

  18. 18

    如何使用Dojo创建复选框列表?

  19. 19

    如何在Rails中呈现复选框的数组/列表?

  20. 20

    如何使用React Mozilla表单创建复选框数组?

  21. 21

    动态列表复选框问题

  22. 22

    动态列表复选框问题

  23. 23

    Kivy语言动态复选框列表

  24. 24

    Thymeleaf 列表中的动态复选框

  25. 25

    在JavaScript中动态创建复选框

  26. 26

    知道复选框是动态创建的-Django

  27. 27

    在UIWebView中创建动态复选框

  28. 28

    在JavaScript中动态创建复选框

  29. 29

    动态创建唯一的复选框

热门标签

归档