当前位置 : 主页 > 手机开发 > 其它 >

深入解析Bootstrap中的下拉列表select

来源:互联网 收集:自由互联 发布时间:2022-06-23
本篇文章给大家详细介绍一下Bootstrap中的下拉列表select,适合初学者学习,希望对大家有所帮助! 前言: 本人是多年Android开发,从0开始学习web前端。同样发现很多博客基本都是拷贝和
本篇文章给大家详细介绍一下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.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效果图

2.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的颜色值
.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有什么开发工具
下一篇:没有了
网友评论