最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

創(chuàng)新互聯(lián)是一家專注于做網(wǎng)站、成都網(wǎng)站設(shè)計與策劃設(shè)計,沭陽網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:沭陽等地區(qū)。沭陽做網(wǎng)站價格咨詢:18980820575

前提條件

當(dāng)然了這里我們要引入Bootstrap和jQuery

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

直接先上個gif效果圖

1.1 html上代碼

        
            請選擇
            蕾絲
            黑絲
            肉絲
            杜蕾斯
            青椒肉絲
        

• form-control 是bootstrap自帶的css樣式

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

請選擇

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

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

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

style="color: black;"

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

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

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

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

    $('#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)擊重置的時候，我們要回到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)移動上去，默認(rèn)的是白色字體，淺藍(lán)色背景。我初學(xué)的時候，找了很多資料，基本都是狗屁不通的，所以這里有大神有簡潔修改css樣式的話，可以評論區(qū)告訴我。我這里有個方案，就是可以用input+下拉菜單去實(shí)現(xiàn)這個下拉列表功能，那樣的話hover想怎么改都可以。

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

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

同樣，先上一張gif效果圖

在使用這個多選下拉列表的時候我們還要引用bootstrap-select，對于初學(xué)者的我來講，我覺得有點(diǎn)小奇怪，為什么官網(wǎng)引用bootstrap全量的包，不包含這個select,這個select github地址是： bootstrap-select,引用如下

2.1 html上代碼

        
            蕾絲
            黑絲
            肉絲
            杜蕾斯
            青椒肉絲
        

• 通過 multiple="multiple" 設(shè)置為多選；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;
}

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

.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)聽有選擇值時，把字體顏色變成黑色，無值時變成灰色，這里和單選有點(diǎn)區(qū)別，重置時，這個監(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)擊重置時，把輸入框清空

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

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

當(dāng)前題目：Bootstrap中的下拉列表select怎么用
當(dāng)前路徑：http://fisionsoft.com.cn/article/jeiphj.html