如何显示引导button下拉标题中的选定项目

我在我的应用程序中使用引导下拉组件像这样:

<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标签。 换句话说,将“请从列表中select”replace为已select的列表项目(“项目I”,“项目II”,“项目III”)。

据我了解你的问题是,你想要改变button的文本点击链接文本,如果是这样你可以尝试这一个: 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方法将事件委托给最近的静态父.on()

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

这里事件委托给静态父$(".dropdown-menu") ,尽pipe你也可以把事件委托给$(document)因为它总是可用的。

Bootstrap 3.3.4更新:

这将允许您为每个元素有不同的显示文本和数据值。 它也会坚持select的意思。

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

我能够稍微改善Jai的工作方式,让你在有不止一个button下拉菜单的情况下,使用引导程序3,

代码的button

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

我还为“select”类添加了5px的保证金。

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

并在li添加class="active"

进一步根据@Kyle的回答修改为$ .text()返回确切的string,所以脱字符标签是字面打印,而不是作为标记,以防万一有人想保持脱字符完好无损下拉。

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

这是我的这个版本,我希望可以节省你的一些时间:)

在这里输入图像描述 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> 

这个工作在同一页面上的多个下拉菜单中。 而且,我在选定的项目上添加了一个脱字符:

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

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

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

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

这似乎是一个长期的问题。 我们只需要在input组中实现一个select标签。 但bootstrap不会这样做: 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>'); }); 

一旦你点击该项目添加一些数据属性,如data-selected-item ='true' ,然后重新获取它。

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

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

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

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

例如:

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来更改button的文本。

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

JavaScript的:

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

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