如何在Bootstrap按钮下拉菜单标题中显示所选项目

Question

我在我的应用程序中使用 Bootstrap 下拉组件，类似于以下方式：

<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>

我希望能够将所选项目显示为按钮标签。换句话说，用被选择的列表项（“Item I”，“Item II”，“Item III”）替换“请从列表中选择”。

- Suffii

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

   });

});

根据您的评论：

这对我来说不起作用，因为当我通过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)，因为它始终可用。

- Jai

---

嗨Jai，我尝试了你的示例链接，但它无法工作。此外，我还需要获取所选值以便稍后发布到数据库中。 - Suffii

嗨Jai，抱歉回复晚了，谢谢你的解决方案。我唯一的问题是如何将它放在.ready()函数中？这个解决方案完美地工作，但当我将它合并到document.ready()中时，它就停止工作了！你能告诉我你是如何得到:first-child的吗？btn类不是一个按钮吗？那么我们如何使用它的第一个子元素？如果您能让我知道如何将所选值捕获到变量中以提交到数据库，我也会很感激。再次感谢您的帮助。 - Suffii

嗨Behseini，这个"$(function(){});"相当于"$(document).ready(function() {});"，你可以在这里找到更多信息：http://api.jquery.com/ready/ - Jai

@Teomanshipahi，这是因为代码删除了内部 Span，而该 Span 用于保持下拉图标。此代码有效（请注意，我的代码在事件处理程序中，具有事件对象 e）：$('.btn:first-child').html($(e.target).text()+' <span class="caret"></span>') 我发现这篇文章很有帮助：http://www.benknowscode.com/2013/12/bootstrap-dropdown-button-select-box-control.html - Paul

这个解决方案看起来有点牵强，不是吗？ - Christine

Answer 2

更新至Bootstrap 3.3.4版本：

这将允许您为每个元素设置不同的显示文本和数据值。它还将在选择时保留插入符号。

JS：

$(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

HTML:

HTML：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

JS Fiddle 示例

- cmcculloh

---

运行良好，我刚刚添加了以下内容以隐藏下拉选择项后的选择： "$(this).parents(".btn-group").find('.selection').text($(this).text()).end() .children( '.dropdown-toggle' ).dropdown( 'toggle' );" - Senthil

Bootstrap 3.3.4 更新：需要将 parents(".input-group-btn") 替换为 parents(".dropdown")。 - cincplug

在实现@cincplug建议的更改后，这应该是被接受的答案。此外，如果你想保留按钮文本中的向下小三角形符号，你需要使用.html代替.text，并将span连接到 $(this).text() 上。 - MattD

@MattD，真希望在我评论被接受之前看到了你的评论 - 你说得很对。 - Paul

在将 id="myselect" 添加到按钮属性后，表单提交工作得非常好。 - Samveen

建议将 $(this).parents(".dropdown").find('.btn') 存储在一个变量中，而不是让 jQuery 两次遍历 DOM。 - Adam

Answer 3

我能够稍微改进Jai的答案，以使其适用于具有良好外观并与Bootstrap 3兼容的多个按钮下拉菜单的情况：

按钮的代码

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Option: <span class="selection">Option 1</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 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());

});

我还给"class=selection"添加了5px的右边距。

- Kyle Crossman

Answer 4

这个单一的jQuery函数将满足你的所有需求。

$( document ).ready(function() {
    $('.dropdown').each(function (key, dropdown) {
        var $dropdown = $(dropdown);
        $dropdown.find('.dropdown-menu a').on('click', function () {
            $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
        });
    });
});

- Mangirdas Skripka

---

谢谢！这个答案让我在浪费了10分钟阅读其他所有解决方案后得到了救赎。 - Aizuddin Badry

这将保留 caret，因此是一个好的解决方案！ - loretoparisi

Answer 5

另一种使用多个下拉菜单的简单方式（Bootstrap 4）

    $('.dropdown-item').on('click',  function(){
        var btnObj = $(this).parent().siblings('button');
        $(btnObj).text($(this).text());
        $(btnObj).val($(this).text());
    });

- Sully

---

当有多个下拉菜单时，此答案同样适用。 - Bennik2000

Answer 6

这个可以在同一页上同时使用多个下拉菜单。 此外，我在选定项上添加了小三角：

    $(".dropdown-menu").on('click', 'li a', function(){
        $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
        $(this).parent().parent().siblings(".btn:first-child").val($(this).text());
    });

- WonderBoy

---

在严格模式下，我收到了“未捕获的引用错误：$xx未定义”的错误。 - Ivan Topić

伊万，你找到在严格模式下可用的东西了吗？ - zeros-and-ones

这对于同一页上的多个Bootstrap下拉菜单非常有效。谢谢！ - Mitch

Answer 7

以下是我希望能够节省您时间的版本 :)

jQuery 部分：

$(".dropdown-menu").on('click', 'li a', function(){
  var selText = $(this).children("h4").html();


 $(this).parent('li').siblings().removeClass('active');
    $('#vl').val($(this).attr('data-value'));
  $(this).parents('.btn-group').find('.selection').html(selText);
  $(this).parents('li').addClass("active");
});

HTML PART:

<div class="container">
  <div class="btn-group">
    <a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"><span class="selection pull-left">Select an option </span> 
      <span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"></span></a>

     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li><a href="#" class="" data-value=1><p> HER Can you write extra text or <b>HTLM</b></p> <h4> <span class="glyphicon glyphicon-plane"></span>  <span> Your Option 1</span> </h4></a>  </li>
       <li><a href="#" class="" data-value=2><p> HER Can you write extra text or <i>HTLM</i> or some long long long long long long long long long long text </p><h4> <span class="glyphicon glyphicon-briefcase"></span> <span>Your Option 2</span>  </h4></a>
      </li>
      <li class="divider"></li>
   <li><a href="#" class="" data-value=3><p> HER Can you write extra text or <b>HTLM</b> or some </p><h4> <span class="glyphicon glyphicon-heart text-danger"></span> <span>Your Option 3</span>  </h4></a>
      </li>
    </ul>
  </div>
  <input type="text" id="vl" />
</div>  

- Oskar

---

如何使下拉菜单中的文本更改为用户刚刚选择的内容？比如说，他们选择了选项1，然后点击了其他地方。此时，选项1的文本应该显示在下拉菜单中，你该如何实现这一点？ - user1835351

当用户选择一个选项时，“var selText = $(this).children("h4").html()”更改文本。 - Oskar

Answer 8

您需要在 <div class="btn-group open"> 中使用 add class open

并在 li 中添加 class="active"

- NullPoiиteя

Answer 9

我已经为页面上的多个下拉菜单更正了脚本

$(function(){
    $(".dropdown-menu li a").click(function(){
        var item = $(this);
        var id = item.parent().parent().attr("aria-labelledby");

        $("#"+id+":first-child").text($(this).text());
        $("#"+id+":first-child").val($(this).text());
   });
});

- Sergio Promov

Answer 10

根据 @Kyle 的回答进一步进行修改，因为 $.text() 返回确切的字符串，所以插入符号标记将被直接打印，而不是作为标记解释，以防有人想要在下拉菜单中保留插入符号。

$(".dropdown-menu li").click(function(){
  $(this).parents(".btn-group").find('.btn').html(
  $(this).text()+" <span class=\"caret\"></span>"
  );
});

- ken