如何显示自举按钮下拉标题选定的项目

我在我的应用程序中使用 bootstrap Dropdown 组件，如下所示:

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

443177 次浏览
小开

单击该项后，添加一些数据属性(如 Data-select-item = ‘ true’)并再次获取它。

然后，对于您单击的 Li Element，请尝试 加上 data-select-item = ‘ true’

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

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

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

小开

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

在 li中加入 class="active"

小开
最佳答案

据我所知，你的问题是，你想改变文本的按钮与点击链接文本，如果这样，你可以尝试这一个: 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 的回答，使用 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());


});

我还添加了一个5像素的边距-权利的“选择”类。

小开

更新为 Bootstrap 3.3.4:

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

约翰逊:

$(".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 小提琴示例

小开

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

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

下面是我的版本，我希望能节省你的一些时间:)

enter image description here 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 标记。但是引导程序不会这样做: https://github.com/twbs/bootstrap/issues/10486

诀窍就是在父 div 中添加“ btn-group”类

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>

约翰逊:

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

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

例如:

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

不允许使用禁用的菜单项

小开

我必须将上面显示的一些 javascript 放在“ document.ready”代码中。否则就没用了。对很多人来说可能是显而易见的，但对我来说不是。所以如果你要测试，看看这个选项。

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

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

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

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

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

这是一个很老的问题，但是... ... 我想用普通/普通的 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;
});
});

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


提交答案