jQuery的现有引导下拉菜单

新建L1标签，我想创建新<li>元素，它应该通过自动使用jQuery该项目添加到现有的自举下拉菜单(<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” 这里

来源

2014-11-25 Prasad

这是很好的做法，正式接受了答案，充分解决你的问题。 – StockB 2015-10-19 15:19:11

您可以使用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/

来源

2014-11-25 11:32:09

真的很抱歉@Chris，但我需要显示新创建的值（“来自textfield”）而不是菜单项的借口...我不是jQuery专家，如果你能帮助我，我会更快乐......谢谢你提前！ – Prasad 2014-11-25 11:48:43

@Prasad - 你可以通过使用'val（）'从文本框的jQuery对象中提取值来实现。我已经更新了这里的小提琴：http://jsfiddle.net/br98nxj9/2/ – 2014-11-25 12:05:43

这现在变得更好了：）...要扩展，我如何添加验证，如果输入为空，然后菜单不应创建项目，只需将.error类添加到文本字段。一旦菜单项被创建，输入值应该被自动模糊，并且重复值也不应该被允许......我知道我要求太多，但这是要求。请你？ – Prasad 2014-11-25 12:14:43

刚刚更新这个 '小' 的预览。检查这个小提琴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); 
});

来源

2014-11-25 11:18:53

嗨尼尔斯...感谢您的快速回复。很抱歉，这段代码无效。由于我对代码非常陌生，我无法找到问题的具体位置。请检查[** Fiddle **]（http://jsfiddle.net/ReddyPrasad/s9Lkdpev/1/） – Prasad 2014-11-25 11:22:46

您好尼尔斯，再次感谢您的快速回复这就像一个冠军...我已经检查了两次:) 保持Greate的工作！ – Prasad 2014-11-25 11:53:07

刚刚根据我之前错过的小提琴更新了这个。 – 2014-11-25 11:53:33

jQuery的现有引导下拉菜单

回答

相关问题