187

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

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

4

16 回答 16

175

据我了解，您的问题是您想通过单击链接的文本更改按钮的文本，如果是这样，您可以试试这个：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)因为它始终可用。

于 2012-11-18T04:45:16.327 回答
154

针对 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：

<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 小提琴示例

于 2014-02-24T22:18:59.757 回答
28

如果您有多个按钮下拉菜单并带有与引导程序 3 一起使用的非常好的演示文稿，我可以稍微改进 Jai 的工作答案：

按钮代码

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

});

我还在“选择”类中添加了一个 5px 的边距。

于 2013-12-11T17:39:47.570 回答
13

这个单一的 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>');
        });
    });
});
于 2016-01-24T20:24:02.153 回答
9

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

    $('.dropdown-item').on('click',  function(){
        var btnObj = $(this).parent().siblings('button');
        $(btnObj).text($(this).text());
        $(btnObj).val($(this).text());
    });
于 2019-02-23T13:08:13.977 回答
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 部分：

<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>
于 2014-10-05T10:18:29.450 回答
7

这个适用于同一页面中的多个下拉菜单。此外，我在所选项目上添加了插入符号：

    $(".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());
    });
于 2015-03-19T09:11:49.437 回答
5

你需要使用添加open类 <div class="btn-group open">

并li添加class="active"

于 2012-11-18T04:31:34.443 回答
4

根据@Kyle 的回答进一步修改，因为 $.text() 返回确切的字符串，因此插入符号标记是按字面意思打印的，而不是作为标记，以防万一有人想在下拉列表中保持插入符号完整。

$(".dropdown-menu li").click(function(){
  $(this).parents(".btn-group").find('.btn').html(
  $(this).text()+" <span class=\"caret\"></span>"
  );
});
于 2014-04-07T16:35:52.490 回答
4

我已更正页面上多个下拉列表的脚本

$(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());
   });
});
于 2015-11-07T20:58:22.457 回答
1

这似乎是一个很长的问题。我们想要的只是在输入组中实现一个选择标签。但引导程序不会这样做：https ://github.com/twbs/bootstrap/issues/10486

诀窍只是将“btn-group”类添加到父 div

html:

<div class="input-group">
  <div class="input-group-btn btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Product Name <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Search</button>
  </span>
</div>

js：

$(".dropdown-menu li a").click(function(e){
    var selText = $(this).text();
    $(this).parents('.input-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');       
});
于 2014-11-25T12:25:33.523 回答
0

单击该项目后，请添加一些数据属性，例如data-selected-item='true'并再次获取它。

尝试为您单击的li 元素添加 data-selected-item='true' ，然后

   $('ul.dropdown-menu li[data-selected-item] a').text();

在添加此属性之前，您只需删除列表中现有的数据选定项。希望这会对你有所帮助

有关 jQuery 中数据属性使用的信息，请参阅jQuery 数据

于 2012-11-18T04:25:55.123 回答
0

例如：

HTML：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
     <BtnCaption>Select item</BtnCaption>
     <span class="caret"></span>   
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li class="disabled"><a href="#">Option 3</a></li>   
  </ul> 
</div>

我使用新元素 BtnCaption仅更改按钮的文本。

粘贴到$(document).ready(function () {}以下文本中

JavaScript：

    $(".dropdown-menu li:not(.disabled) a").click(function () {
        $(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text()));
    });

:not(.disabled)不允许使用禁用的菜单项

于 2016-03-17T11:55:58.510 回答
0

我不得不将上面显示的一些javascripts放在“document.ready”代码中。否则他们没有工作。对很多人来说可能很明显，但对我来说不是。因此，如果您正在测试，请查看该选项。

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>
于 2018-03-04T19:19:43.397 回答
0

我更喜欢为此使用选择性浮动标签

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
于 2021-08-25T08:39:03.797 回答
0

一个相当老的问题但是......我想用普通/香草JS来做，所以，这是我这样做的答案（ECMAScript 2015（ES6）语法，在Bootstrap 5.1上工作）：

let selectorList = Array
    .from(document.querySelectorAll('dropdown-menu'))
    .forEach(selector => {
        //Add an event listener for displaying the selected dropdown item
        selector.addEventListener("click", function() {
           let selectorButton = selector.previousElementSibling || selector.nextElementSibling;
           selectorButton.textContent = this.querySelector(":checked").value;
           selectorButton.value = this.querySelector(':checked').value;
        });
    });

我siblings()通过使用 JSpreviousElementSibling() || nextElementSibling()方法来使用 JQuery 的想法，它将在元素之前或之后找到按钮<ul class="dropdown-menu"></ul>元素。

于 2022-01-01T16:01:29.723 回答