是否有任何开箱即用的东西支持渲染“常规”事实下拉列表选择框?也就是说,下拉框是一个值列表,如果选中,则填充列表框的内容?
与此功能类似的东西?
http://bootstrapformhelpers.com/select/
答案 0 :(得分:422)
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>
答案 1 :(得分:38)
另一个选择是使Bootstrap下拉行为像使用jQuery的select ...
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});
答案 2 :(得分:11)
现在,对于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>');
});
答案 3 :(得分:11)
测试:http://jsfiddle.net/brynner/hkwhaqsj/6/
HTML
<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%;}
答案 4 :(得分:5)
不使用.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'));
});
&#13;
<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>
&#13;
答案 5 :(得分:3)
Ben的代码要求父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>');
});
答案 6 :(得分:1)
Bootstrap3 .form-control
很酷,但对于那些喜欢或需要使用button和ul选项下拉列表的人来说,这里是更新的代码。我已经编辑了Steve的代码来修复跳转到哈希链接并在选择后关闭下拉列表。
感谢Steve,Ben和Skelly!
$(".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;
});
答案 7 :(得分:1)
我目前正在与下拉菜单斗争,我想分享一下我的经历:
有些特定情况下<select>
无法使用,必须使用下拉菜单“模拟”。
例如,如果要创建引导输入组,例如带下拉列表的按钮(请参阅http://getbootstrap.com/components/#input-groups-buttons-dropdowns)。遗憾的是,输入组不支持<select>
,因此无法正确呈现。
或者有人已经解决了这个问题吗? 我对解决方案非常感兴趣。
为了使它变得更加复杂,如果您使用glypicons或字体很棒的图标作为下拉内容,则不能使用如此简单的$(this).text()
来捕获用户在下拉列表中选择的内容。例如:
<li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li>
因为在这种情况下没有文本,如果你要添加一些,那么它也会显示在下拉元素中,这是不需要的。
我找到了两种可能的解决方案:
1)
使用$(this).html()
获取所选<li>
元素的内容,然后对其进行检查,但您会得到类似<a href="#0"><i class="fa fa-minus"></i></a>
的内容,因此您需要使用此内容来提取所需内容。
2)
使用$(this).text()
并隐藏隐藏范围中元素中的文本:
<li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>
。
对我来说这是一个简单而优雅的解决方案,你可以放置你需要的任何文本,文本将被隐藏,你不需要像选项1中那样对$(this).html()
结果进行任何转换来获得你需要的东西。
我希望它很清楚,可以帮助某人: - )