我通过循环遍历每个数组项并相应地分配属性,使用数组创建了一个菜单项列表。
现在我需要在菜单中为每个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">▼</span></a>
<ul class="sub-menu" id="assetNameMenu">
@* li elements created in script *@
</ul>
</li>
创建以下内容但没有复选框:
目的是动态创建一个复选框项列表:
<li>
<a>Default <span class="arrow">▼</span></a>
<ul class="sub-menu" id="assetNameMenu">
<li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" /> Option 1</a></li>
<li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" /> Option 2</a></li>
<li><a href="#" class="small" data-value="option3" tabindex="-1"><input type="checkbox" /> Option 3</a></li>
<li><a href="#" class="small" data-value="option4" tabindex="-1"><input type="checkbox" /> Option 4</a></li>
<li><a href="#" class="small" data-value="option5" tabindex="-1"><input type="checkbox" /> Option 5</a></li>
<li><a href="#" class="small" data-value="option6" tabindex="-1"><input type="checkbox" /> Option 6</a></li>
</ul>
</li>
其中创建如下:
答案 0 :(得分:3)
只需为输入设置正确的类型并更改顺序:
$.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);
});
Codepen :https://codepen.io/anon/pen/oLmQRp
<强> 更新 强>
显示:
.sub-menu {
width: auto;
[...]
}
.sub-menu li a {
text-align: left;
[...]
}
答案 1 :(得分:0)
您需要将类型设置为checkbox
:.attr('type', 'checkbox')
$.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('type', 'checkbox')
.appendTo(aaa);
});