JQuery Создать новый LI тег в существующем меню Bootstrap выпадающего

Question

Я хочу, чтобы создать новый элемент <li> и он должен добавить этот пункт к существующему бутстраповскому ниспадающему меню (<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

Вы можете добавить HTML, используя метод append(). «Авто» выбрать новый флажок в вашем новом пункте меню, просто установите атрибут 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».

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