如何在引导按钮下拉标题中显示所选项目

小编典典

如何在引导按钮下拉标题中显示所选项目

all

我在我的应用程序中使用引导下拉组件，如下所示：

<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”）。

阅读 67

2022-07-27

共1个答案

小编典典

据我了解，您的问题是您想通过单击链接文本更改按钮的文本，如果是这样，您可以试试这个：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 调用填充列表项时，这对我不起作用。

.on()因此您必须使用jQuery 方法将事件委托给最近的静态父级：

 $(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)因为它始终可用。

2022-07-27