Bootstrap中的下拉列表select怎么用

小编给大家分享一下Bootstrap中的下拉列表select怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

前提条件

当然了这里我们要引入Bootstrap和jQuery

一、基础的单项选择下拉列表

直接先上个gif效果图

1.1 html上代码

                                蕾丝            黑丝            肉丝            杜蕾斯            青椒肉丝        

• form-control 是bootstrap自带的css样式

• 我们会发现她缺少placeholder,我们可以用以下这种方式给他加个placeholder

• placeholder的颜色值比较浅，那么我们给他加个css,form-control-placeholder

.form-control-placeholder{    color: #ccc;}

• 加完之后，你会发现下拉列表里的颜色值也随之改变了。那么我们可以给option加上自己的颜色值就不会改变了

style="color: black;"

1.2 js代码监听和获取值

• 当我们选中值的时候，框内要变成黑色，如果点击重置要变回灰色，这时候对输入框做一个监听，如果value==-1就是灰色。点击重置的时候不会触发这个监听，所以变灰色我放在了重置方法里。black_color及gray_color就是2个css样式，里面只有color值

    $("#selectLeo").on('change', function () {        if ($(this).val() != -1) {            //这里是默认的            $('#selectLeo').addClass('black_color').removeClass('gray_color')        }    })

• 点击提交按钮的时候，获取当前选中的value和text值,singleValue和singleText是我放置的2个展示文本

    $('#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())    })

• 点击重置的时候，我们要回到placeholde及颜色变回灰色

    $('#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上代码

                    蕾丝            黑丝            肉丝            杜蕾斯            青椒肉丝        

• 通过 multiple="multiple" 设置为多选；class="selectpicker form-control" 是bootstrap自带css样式；title="请选择" 就是我们的placeholder

• 通过以下css样式 改变placeholder的颜色值

.filter-option-inner-inner{    color: #ccc;}

• 通过下方css样式，改变下拉列表的字体颜色

.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怎么用"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！