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

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

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

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

尝试为单击的li元素添加所选数据项class='true'，然后

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

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

---

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

您需要在

在
li
add
class=“active”
中，据我所知，您的问题是希望通过单击链接文本来更改按钮的文本，如果是这样，您可以尝试以下方法：


根据你的评论：

当我通过ajax调用填充列表项
时，这对我不起作用

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

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});

此处事件被委托给静态父级
$（“.dropdown menu”）
，尽管您可以将事件委托给
$（文档）
，因为它总是可用的。
我能够稍微改进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>

我还向“selection”类添加了5px边距。
为Bootstrap 3.3.4更新：

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

JS:

$（“.下拉菜单a”）。单击（函数（）{
$（this.parents（“.dropdown”）.find（'.btn'）.html（$（this.text（）+”）；
$（this.parents（“.dropdown”）.find（'.btn'）.val（$（this.data（'value'））；
});

HTML:


下拉列表







根据@Kyle as的回答进一步修改
$.text（）返回精确的字符串，因此插入符号标记按字面形式打印，而不是作为标记打印，以防有人希望在下拉列表中保持插入符号的完整性

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

$（“.dropdown menu li”）。单击（函数（）{
$（this.parents（“.btn group”）.find（“.btn”）.html(
$（此）.text（）+“”
);
});
这是我的版本，我希望可以为您节省一些时间：）


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>  










这似乎是一个很长的问题。我们只需要在输入组中实现一个select标记。但引导程序无法做到这一点：

诀窍就是将“btn group”类添加到父div中

html:


品名




搜寻

js:

$（“.下拉菜单a”）。单击（函数（e）{
var selText=$（this.text（）；
$（this）.parents（'.input group'）.find（'.dropdown toggle'）.html（selText+''）；
});
此选项适用于同一页面中的多个下拉列表。
此外，我在所选项目上添加了插入符号：

    $(".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());
    });

$（“.dropdown menu”）。在（'click'，'li a'，function（）上{
$（this.parent（）.parent（）.sides（“.btn:first child”）.html（$（this.text（）+”）；
$（this.parent（）.parent（）.sides（“.btn:first child”）.val（$（this.text（））；
});
我已经更正了页面上多个下拉列表的脚本

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

这个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>');
        });
    });
});

$（文档）.ready（函数（）{
$（'.dropdown'）。每个（函数（键，下拉）{
变量$dropdown=$（下拉菜单）；
$dropdown.find（'.dropdown菜单a'）。on（'click'，function（）{
$dropdown.find（'button'）.text（$（this.text（））.append（''）；
});
});
});
例如：

HTML:

：不（.disabled）不允许使用禁用的菜单项
我不得不将上面显示的一些Java脚本放在“document.ready”代码中。否则它们就不起作用了。可能对很多人来说是显而易见的，但对我来说不是。所以，如果你正在测试，看看这个选项

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>


$（文档）.ready（函数（）{
//这里的其余javascript代码
});
处理多个下拉列表的另一种简单方法（引导4）

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

您好Murali，感谢您的评论，我尝试了这个，但仍然没有得到任何东西
var test=$（'ul.dropdown-menu li'）.data（'selected-item'）.find（'a'）.text（）$（“nbtn”）.html（测试）$(".dropdown-menu li a").click(function(e){
    var selText = $(this).text();
    $(this).parents('.input-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');       
});

    $(".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());
    });

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

$( 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>');
        });
    });
});

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

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

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>

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