小编给大家分享一下Bootstrap中的下拉列表select怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联是一家专注于做网站、成都网站设计与策划设计,沭阳网站建设哪家好?创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:沭阳等地区。沭阳做网站价格咨询:18980820575
前提条件
当然了这里我们要引入Bootstrap和jQuery
一、基础的单项选择下拉列表
直接先上个gif效果图
1.1 html上代码
请选择
蕾丝
黑丝
肉丝
杜蕾斯
青椒肉丝
请选择
.form-control-placeholder{
color: #ccc;
}style="color: black;"
1.2 js代码监听和获取值
$("#selectLeo").on('change', function () {
if ($(this).val() != -1) {
//这里是默认的
$('#selectLeo').addClass('black_color').removeClass('gray_color')
}
}) $('#submit_single_select').click(function () {
var options = $('#selectLeo option:selected')
$('#singleValue').html('当前选中的value: '+options.val())
$('#singleText').html('当前选中的text: '+options.text())
console.log(options.val())
console.log(options.text())
}) $('#submit_single_repet').click(function () {
var options = $('#selectLeo option')
options[0].selected = true
$('#selectLeo').addClass('gray_color').removeClass('black_color')
})1.3 如何修改下拉列表 :hover
鼠标移动上去，默认的是白色字体，浅蓝色背景。我初学的时候，找了很多资料，基本都是狗屁不通的，所以这里有大神有简洁修改css样式的话，可以评论区告诉我。我这里有个方案，就是可以用input+下拉菜单去实现这个下拉列表功能，那样的话hover想怎么改都可以。
好了，单向下拉列表选择就结束了。你不会不明白吧。
二、多项选择，下拉列表
同样，先上一张gif效果图
在使用这个多选下拉列表的时候我们还要引用bootstrap-select，对于初学者的我来讲，我觉得有点小奇怪，为什么官网引用bootstrap全量的包，不包含这个select,这个select github地址是： bootstrap-select,引用如下
2.1 html上代码
蕾丝
黑丝
肉丝
杜蕾斯
青椒肉丝
.filter-option-inner-inner{
color: #ccc;
}.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: black;
white-space: nowrap;
}.dropdown-menu>li>a:hover {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: white;
white-space: nowrap;
background-color: rgba(75, 62, 255, 0.767);
}好了，这样就完成了样式
2.2 多选select监听及获取值
$('#selectLeo_more').on('change', function () {
if ($(this).val().length != 0) {
//这里是默认的
$('.filter-option-inner-inner').css("color", "black")
} else {
$('.filter-option-inner-inner').css("color", "#ccc")
}
}) $('#submit_mult_select').click(function () {
$('#multValue').html('当前选中的value: '+$('#selectLeo_more').val())
$('#multText').html('当前选中的text: '+$('[data-id|=selectLeo_more').text())
console.log($('#selectLeo_more').val())
}) $('#submit_mult_repet').click(function () {
$('#selectLeo_more').selectpicker('deselectAll');
})以上是“Bootstrap中的下拉列表select怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网站栏目：Bootstrap中的下拉列表select怎么用
分享地址：
http://mbwzsj.com/article/jeiphj.html
