我如何渲染一个列表选择框(下拉)与引导?

小开

最佳答案

Bootstrap 3使用.form-control类来设置表单组件的样式。

<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>

< a href = " http://getbootstrap.com/css/表单控件" > http://getbootstrap.com/css/表单控件< / >

小开

你可以使用下拉组件进行引导选择…

引导5(更新2021年)

<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#" id="selectA">Select<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">Item I</a></li>
<li class="dropdown-item"><a href="#">Item II</a></li>
<li class="dropdown-item"><a href="#">Item III</a></li>
<li class="dropdown-item"><a href="#">Item IV</a></li>
</ul>




let links = document.querySelectorAll('.dropdown-item')
links.forEach(element => element.addEventListener("click", function () {
let text = element.innerText
document.getElementById('selectA').innerText = text
}))

Bootstrap 5

原始答案(引导3)

另一个选择是使用jQuery使Bootstrap下拉菜单的行为像一个选择…

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

Bootstrap 3

小开

随着Bootstap中下拉语法的变化，Skelly的漂亮而简单的答案现在已经过时了。你可以这样说:

$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.form-group').find('button[data-toggle="dropdown"]').html(selText+' <span class="caret"></span>');
});

小开

测试:http://jsfiddle.net/brynner/hkwhaqsj/6/

超文本标记语言

<div class="input-group-btn select" id="select1">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">One</span> <span class="caret"></span></button>
<ul class="dropdown-menu option" role="menu">
<li id="1"><a href="#">One</a></li>
<li id="2"><a href="#">Two</a></li>
</ul>
</div>

jQuery

$('body').on('click','.option li',function(){
var i = $(this).parents('.select').attr('id');
var v = $(this).children().text();
var o = $(this).attr('id');
$('#'+i+' .selected').attr('id',o);
$('#'+i+' .selected').text(v);
});

CSS

.select button {width:100%; text-align:left;}
.select .caret {position:absolute; right:10px; margin-top:10px;}
.select:last-child>.btn {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.selected {padding-right:10px;}
.option {width:100%;}

小开

本的代码要求父div有form-group类(我使用btn-group)，这是一个略有不同的版本，只是搜索最近的div，甚至可能更快一点。

$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
});

小开

另一个选项是使用引导选择。用他们自己的话来说:

一个使用按钮下拉的自定义选择/多选引导，设计成像常规引导选择一样。

小开

bootstrap3__abc0很酷，但对于那些喜欢或需要下拉按钮和ul选项的人，这里是更新的代码。我已经编辑了Steve的代码，以修复跳转到哈希链接并在选择后关闭下拉菜单。

感谢史蒂夫、本和斯凯利!

$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
$(this).closest('.dropdown').removeClass("open");
return false;
});

小开

我目前正在与下拉列表作斗争，我想分享我的经验:

在某些特定的情况下，<select>不能使用，必须使用下拉菜单来“模拟”。

例如，如果你想创建引导输入组，比如带有下拉菜单的Buttons(参见http://getbootstrap.com/components/#input-groups-buttons-dropdowns)。不幸的是，在输入组中不支持<select>，它将不能正确地呈现。

或者有人已经解出来了吗? 我对解决方案很感兴趣。

更复杂的是，如果你使用字形图标或字体awesome图标作为下拉菜单的内容，你不能这么简单地使用$(this).text()来捕获用户在下拉菜单中选择的内容。例如: <li id="someId"><a href="#0"></a></li> 因为在这种情况下没有文本，如果你要添加一些，那么它也将显示在下拉元素中，这是不需要的

我发现了两种可能的解决方案:

1) 使用$(this).html()来获取所选<li>元素的内容，然后检查它，但是你会得到类似<a href="#0"></a>的东西，所以你需要使用它来提取你需要的内容 2) 使用$(this).text()并在隐藏span的元素中隐藏文本: <li id="someId"><a href="#0">text</a></li>。对我来说，这是一个简单而优雅的解决方案，你可以把你需要的任何文本，文本将被隐藏，你不需要像选项1那样对$(this).html()结果进行任何转换来获得你需要的东西

我希望这是清楚的，可以帮助别人:-)

小开

另一种不使用.form-control的方法是:

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>




<div class="btn-group">
<button  type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test <span class="caret"> </span>
</button>
<ul class="dropdown-menu">
<li><a href='#'>test 1</a></li>
<li><a href='#'>test 2</a></li>
<li><a href='#'>test 3</a></li>
</ul>
</div>