如何显示引导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）不允许使用禁用的菜单项
