Bootstrap中的下拉列表select怎么用
小编给大家分享一下Bootstrap中的下拉列表select怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联是一家专注于做网站、成都网站设计与策划设计,沭阳网站建设哪家好?创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:沭阳等地区。沭阳做网站价格咨询:18980820575
前提条件
当然了这里我们要引入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怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文题目:Bootstrap中的下拉列表select怎么用
分享链接:http://myzitong.com/article/jeiphj.html