jQuery 在现有的 Bootstrap 下拉菜单中创建新的 LI 标签

Question

我想创建新的 <li> 元素，它应该通过自动使用 jQuery 将该项目添加到现有的引导下拉菜单 (<ul>) 中。新创建的项目也应该在下拉列表中自动选择。

有人可以帮帮我吗？

提前致谢！

HTML：

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Select Items <span class="caret"></span>
  </button>
  <ul class="dropdown-menu reddy" role="menu">
      <li><input type="text" class="form-control"><button type="button" class="btn btn-primary btn-xs">Create New</button></li>
      <li><a href="#"><label for="menuitem1"><input type="checkbox" id="menuitem1" /> Menu Item 1</label></a></li>
      <li><a href="#"><label for="menuitem2"><input type="checkbox" id="menuitem2" /> Menu Item 2</label></a></li>
      <li><a href="#"><label for="menuitem3"><input type="checkbox" id="menuitem3" /> Menu Item 3</label></a></li>
  </ul>
</div>

CSS：

.form-control{max-width:140px;float:left;margin-right:5px;margin-left:10px;}
.btn{margin-top:5px;}
.open>.dropdown-menu{width:250px;}

请在此处的“Fiddle”中找到预览

Answer 1

您可以使用 append() 方法添加 HTML。要“自动”选择新菜单项中的新复选框，只需将 checked 属性设置为“已选中”

 $("#createnew").on("click", function() {    
    var $dropdown = $(".dropdown-menu.reddy");
    var menuItemNo = $dropdown.find("li").length;
    var menuItemId = "menuitem" + menuItemNo;    

    $dropdown.append("<li><a href='#'><label for='" + menuItemId + "'><input type='checkbox' id='" + menuItemId + "' checked='checked' /> Menu Item " + menuItemNo +"</label></a></li>");
});

在此处查看更新的示例：http://jsfiddle.net/br98nxj9/1/

Answer 2

刚刚更新了这个“小”。检查这个小提琴http://jsfiddle.net/pamxnouh/

这是使用的 javascript。确保为您的创建按钮提供一个“new-li”ID。

$('#new-li').on('click', function(event){
    event.stopPropagation();
    var x = $(event.target).closest('ul').find("a").size()+1;
    $(event.target).closest('ul').append("<li><a href='#'><label for='menuitem"+x+"'><input type='checkbox' id='menuitem"+x+"' />"+$(event.target).siblings('input').first().val()+"</label></a></li>");
    $(event.target).closest('ul').find('input').each(function(){
        $(this).prop('checked', false);
    });
    $(event.target).closest('ul').find('input').last().prop('checked', true);
});