当我在下拉列表中选择项目时,我需要更改下拉列表的标题,这是我现在的代码
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-
toggle="dropdown">
Option: <span class="selection">Groups</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Group 1</a></li>
<li><a href="#">Group 2</a></li>
<li><a href="#">Group 3</a></li>
</ul>
</div>
这是jQuery
$(".dropdown-menu li a").click(function(){
$(this).parents(".btn-group").find('.selection').text($(this).text());
$(this).parents(".btn-group").find('.selection').val($(this).text());
});
当我选择其中任何一个时,仍然不会改变我的头衔。
将此添加到您的<head>
:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
也许你忘了包含JQuery库。
据我所知,您的问题是您想要通过点击链接文本来更改按钮的文本,如果是这样,您可以尝试这个: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());
});
});
根据你的评论:
当我列出通过ajax调用填充的项目<li>
时,这对我不起作用。
所以你必须使用.on()
jQuery方法将事件委托给最近的静态父级:
$(function(){
$(".dropdown-menu").on('click', 'li a', function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
这里事件被委托给静态父$(".dropdown-menu")
,尽管你也可以将事件委托给$(document)
,因为它总是可用的。