jQuery的現有引導下拉菜單

Question

新建L1標籤，我想創建新<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。確保給你的創建按鈕一個'新的'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); 
});