Bootstrap中的下拉列表select怎么用

小編給大家分享一下Bootstrap中的下拉列表select怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前提條件

當(dāng)然了這里我們要引入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">

一、基礎(chǔ)的單項(xiàng)選擇下拉列表

直接先上個(gè)gif效果圖

1.1 html上代碼

        <select id="selectLeo" class="form-control form-control-placeholder">
            <option value="-1" disabled selected hidden>請(qǐng)選擇</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樣式

• 我們會(huì)發(fā)現(xiàn)她缺少placeholder,我們可以用以下這種方式給他加個(gè)placeholder

<option value="-1" disabled selected hidden>請(qǐng)選擇</option>

• placeholder的顏色值比較淺，那么我們給他加個(gè)css,form-control-placeholder

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

• 加完之后，你會(huì)發(fā)現(xiàn)下拉列表里的顏色值也隨之改變了。那么我們可以給option加上自己的顏色值就不會(huì)改變了

style="color: black;"

1.2 js代碼監(jiān)聽和獲取值

• 當(dāng)我們選中值的時(shí)候，框內(nèi)要變成黑色，如果點(diǎn)擊重置要變回灰色，這時(shí)候?qū)斎肟蜃鲆粋€(gè)監(jiān)聽，如果value==-1就是灰色。點(diǎn)擊重置的時(shí)候不會(huì)觸發(fā)這個(gè)監(jiān)聽，所以變灰色我放在了重置方法里。black_color及gray_color就是2個(gè)css樣式，里面只有color值

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

• 點(diǎn)擊提交按鈕的時(shí)候，獲取當(dāng)前選中的value和text值,singleValue和singleText是我放置的2個(gè)展示文本

    $('#submit_single_select').click(function () {
        var options = $('#selectLeo option:selected')
        $('#singleValue').html('當(dāng)前選中的value: '+options.val())
        $('#singleText').html('當(dāng)前選中的text: '+options.text())
        console.log(options.val())
        console.log(options.text())
    })

• 點(diǎn)擊重置的時(shí)候，我們要回到placeholde及顏色變回灰色

    $('#submit_single_repet').click(function () {
        var options = $('#selectLeo option')
        options[0].selected = true
        $('#selectLeo').addClass('gray_color').removeClass('black_color')
    })

1.3 如何修改下拉列表 :hover

鼠標(biāo)移動(dòng)上去，默認(rèn)的是白色字體，淺藍(lán)色背景。我初學(xué)的時(shí)候，找了很多資料，基本都是狗屁不通的，所以這里有大神有簡(jiǎn)潔修改css樣式的話，可以評(píng)論區(qū)告訴我。我這里有個(gè)方案，就是可以用input+下拉菜單去實(shí)現(xiàn)這個(gè)下拉列表功能，那樣的話hover想怎么改都可以。

好了，單向下拉列表選擇就結(jié)束了。你不會(huì)不明白吧。

二、多項(xiàng)選擇，下拉列表

同樣，先上一張gif效果圖

在使用這個(gè)多選下拉列表的時(shí)候我們還要引用bootstrap-select，對(duì)于初學(xué)者的我來講，我覺得有點(diǎn)小奇怪，為什么官網(wǎng)引用bootstrap全量的包，不包含這個(gè)select,這個(gè)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="請(qǐng)選擇">
            <option value="0">蕾絲</option>
            <option value="1">黑絲</option>
            <option value="2">肉絲</option>
            <option value="3">杜蕾斯</option>
            <option value="4">青椒肉絲</option>
        </select>

• 通過 multiple="multiple" 設(shè)置為多選；class="selectpicker form-control" 是bootstrap自帶css樣式；title="請(qǐng)選擇" 就是我們的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;
}

• 通過下方，改變鼠標(biāo)移動(dòng)上去后，字體及背景顏色的顯示

.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監(jiān)聽及獲取值

• 多選下拉列表的監(jiān)聽，這里監(jiān)聽有選擇值時(shí)，把字體顏色變成黑色，無值時(shí)變成灰色，這里和單選有點(diǎn)區(qū)別，重置時(shí)，這個(gè)監(jiān)聽是生效的

    $('#selectLeo_more').on('change', function () {
        if ($(this).val().length != 0) {
            //這里是默認(rèn)的
            $('.filter-option-inner-inner').css("color", "black")
        } else {
            $('.filter-option-inner-inner').css("color", "#ccc")
        }
    })

• 點(diǎn)擊提交，獲取所選值

    $('#submit_mult_select').click(function () {
        $('#multValue').html('當(dāng)前選中的value: '+$('#selectLeo_more').val())
        $('#multText').html('當(dāng)前選中的text: '+$('[data-id|=selectLeo_more').text())
        console.log($('#selectLeo_more').val())
    })

• 點(diǎn)擊重置時(shí)，把輸入框清空

    $('#submit_mult_repet').click(function () {
        $('#selectLeo_more').selectpicker('deselectAll');
    })

以上是“Bootstrap中的下拉列表select怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！