脚本宝典收集整理的这篇文章主要介绍了深入解析Bootstrap中的下拉列表select,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家详细介绍一下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效果图
<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>
<option value="-1" disabled selected hidden>请选择</option>
.form-control-placeholder{ color: #ccc; }
style="color: black;"
$("#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') })
鼠标移动上去,默认的是白色字体,浅蓝色背景。我初学的时候,找了很多资料,基本都是狗屁不通的,所以这里有大神有简洁修改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>
<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>
.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); }
好了,这样就完成了样式
@H_723_126@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全部内容,希望文章能够帮你解决深入解析Bootstrap中的下拉列表select所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。