广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本篇文章给大家详细介绍一下Bootstrap中的下拉列表select，适合初学者学习，希望对大家有所帮助！
前言： 本人是多年Android开发，从0开始学习web前端。同样发现很多博客基本都是拷贝和复制，还说的不清楚。所以把我觉得目前博客上写不清的，着重写下。再学习完vue框架后，学习原生官网开发，但是学习到Bootstrap的select时，觉得网上资料都是迷迷糊糊不清的，很让初学者迷惑。故有此篇。【相关推荐：《bootstrap教程》】
前提条件当然了这里我们要引入Bootstrap和jQuery
<script type="text/javascript" src="./js/jquery-3.6.0.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css">登录后复制一、基础的单项选择下拉列表
直接先上个gif效果图
1.1 html上代码<select id="selectLeo" class="form-control form-control-placeholder"> <option value="-1" disabled selected hidden>请选择</option> <option value="0" style="color: black;">蕾丝</option> <option value="1" style="color: black;">黑丝</option> <option value="2" style="color: black;">肉丝</option> <option value="3" style="color: black;">杜蕾斯</option> <option value="4" style="color: black;">青椒肉丝</option> </select>登录后复制form-control 是bootstrap自带的css样式我们会发现她缺少placeholder,我们可以用以下这种方式给他加个placeholder
<option value="-1" disabled selected hidden>请选择</option>登录后复制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,引用如下
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>登录后复制2.1 html上代码
<select multiple="multiple" id="selectLeo_more" class="selectpicker form-control" title="请选择"> <option value="0">蕾丝</option> <option value="1">黑丝</option> <option value="2">肉丝</option> <option value="3">杜蕾斯</option> <option value="4">青椒肉丝</option> </select>登录后复制通过 multiple="multiple" 设置为多选；class="selectpicker form-control" 是bootstrap自带css样式；title="请选择" 就是我们的placeholder通过以下css样式 改变placeholder的颜色值
<select id="selectLeo" class="form-control form-control-placeholder"> <option value="-1" disabled selected hidden>请选择</option> <option value="0" style="color: black;">蕾丝</option> <option value="1" style="color: black;">黑丝</option> <option value="2" style="color: black;">肉丝</option> <option value="3" style="color: black;">杜蕾斯</option> <option value="4" style="color: black;">青椒肉丝</option> </select>0登录后复制通过下方css样式，改变下拉列表的字体颜色
<select id="selectLeo" class="form-control form-control-placeholder"> <option value="-1" disabled selected hidden>请选择</option> <option value="0" style="color: black;">蕾丝</option> <option value="1" style="color: black;">黑丝</option> <option value="2" style="color: black;">肉丝</option> <option value="3" style="color: black;">杜蕾斯</option> <option value="4" style="color: black;">青椒肉丝</option> </select>1登录后复制通过下方，改变鼠标移动上去后，字体及背景颜色的显示
<select id="selectLeo" class="form-control form-control-placeholder"> <option value="-1" disabled selected hidden>请选择</option> <option value="0" style="color: black;">蕾丝</option> <option value="1" style="color: black;">黑丝</option> <option value="2" style="color: black;">肉丝</option> <option value="3" style="color: black;">杜蕾斯</option> <option value="4" style="color: black;">青椒肉丝</option> </select>2登录后复制
好了，这样就完成了样式
2.2 多选select监听及获取值多选下拉列表的监听，这里监听有选择值时，把字体颜色变成黑色，无值时变成灰色，这里和单选有点区别，重置时，这个监听是生效的<select id="selectLeo" class="form-control form-control-placeholder"> <option value="-1" disabled selected hidden>请选择</option> <option value="0" style="color: black;">蕾丝</option> <option value="1" style="color: black;">黑丝</option> <option value="2" style="color: black;">肉丝</option> <option value="3" style="color: black;">杜蕾斯</option> <option value="4" style="color: black;">青椒肉丝</option> </select>3登录后复制点击提交，获取所选值
<select id="selectLeo" class="form-control form-control-placeholder"> <option value="-1" disabled selected hidden>请选择</option> <option value="0" style="color: black;">蕾丝</option> <option value="1" style="color: black;">黑丝</option> <option value="2" style="color: black;">肉丝</option> <option value="3" style="color: black;">杜蕾斯</option> <option value="4" style="color: black;">青椒肉丝</option> </select>4登录后复制点击重置时，把输入框清空
<select id="selectLeo" class="form-control form-control-placeholder"> <option value="-1" disabled selected hidden>请选择</option> <option value="0" style="color: black;">蕾丝</option> <option value="1" style="color: black;">黑丝</option> <option value="2" style="color: black;">肉丝</option> <option value="3" style="color: black;">杜蕾斯</option> <option value="4" style="color: black;">青椒肉丝</option> </select>5登录后复制
更多编程相关知识，请访问：编程入门！！
以上就是深入解析Bootstrap中的下拉列表select的详细内容，更多请关注9543建站博客其它相关文章！
发表评论