Question

在下拉列表中选择项目时，我需要更改下拉标题，这是我现在的代码

<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());

});

当我选择其中任何一个时，标题仍然不会改变。

Answer 1

将此添加到您的<head>：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

也许您忘记了包含JQuery库。

Answer 2

据我了解，您的问题是您想使用单击链接的文本来更改按钮的文本，如果可以的话，您可以尝试以下操作：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)，因为它总是可用的。

如何通过选择项目来更改下拉菜单按钮的标题？

2 个答案: