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

Question

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

有人可以帮我吗？

提前致谢!

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 属性设置为“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/