Question

我想创建新的 <li> 元素，它应该通过自动使用jQuery将该项添加到现有的bootstrap下拉菜单 (<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;}

请在＆＃34; Fiddle＆＃34;中找到预览。这里

Answer 1

您可以使用append()方法添加HTML。到＆＃34;汽车＆＃34;在新菜单项中选中一个新复选框，只需将checked属性设置为＆＃34;选中＆＃34;

 $("#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);
});

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

2 个答案: