我在我的应用程序中使用引导下拉组件,如下所示:
<div class="btn-group"> <button class="btn">Please Select From List</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Item I</a></li> <li><a tabindex="-1" href="#">Item II</a></li> <li><a tabindex="-1" href="#">Item III</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Other</a></li> </ul> </div>
我想将所选项目显示为 btn 标签。换句话说,将“请从列表中选择”替换为已选择的列表项(“项目 I”、“项目 II”、“项目 III”)。
据我了解,您的问题是您想通过单击链接文本更改按钮的文本,如果是这样,您可以试试这个:http: //jsbin.com/owuyix/4/edit
$(function(){ $(".dropdown-menu li a").click(function(){ $(".btn:first-child").text($(this).text()); $(".btn:first-child").val($(this).text()); }); });
根据您的评论:
<li>当我通过 ajax 调用填充列表项时,这对我不起作用。
<li>
.on()因此您必须使用jQuery 方法将事件委托给最近的静态父级:
.on()
$(function(){ $(".dropdown-menu").on('click', 'li a', function(){ $(".btn:first-child").text($(this).text()); $(".btn:first-child").val($(this).text()); }); });
这里的事件被委托给静态 parent $(".dropdown-menu"),尽管您也可以将事件委托给 the ,$(document)因为它始终可用。
$(".dropdown-menu")
$(document)