Analisis mendalam pemilihan senarai juntai bawah dalam Bootstrap-Tutorial Bootstrap-php.cn

Analisis mendalam pemilihan senarai juntai bawah dalam Bootstrap

青灯夜游

Lepaskan： 2021-10-29 11:33:31

ke hadapan

4187 orang telah melayarinya

Artikel ini akan memberi anda pengenalan terperinci kepada pilihan senarai lungsur dalam Bootstrap Saya harap ia akan membantu semua orang.

Analisis mendalam pemilihan senarai juntai bawah dalam Bootstrap

Kata Pengantar: Saya telah membangunkan Android selama bertahun-tahun dan mula belajar web front-end dari awal. Saya juga mendapati bahawa banyak blog pada dasarnya disalin dan diterbitkan semula, dan ia tidak jelas. Jadi saya fokus untuk menulis perkara yang saya rasa kurang jelas di blog semasa. Selepas mempelajari rangka kerja Vue, saya mula mempelajari pembangunan laman web rasmi asli Namun, apabila saya mengetahui tentang pemilihan Bootstrap, saya merasakan maklumat dalam talian itu mengelirukan, yang sangat mengelirukan untuk pemula. Oleh itu artikel ini. [Cadangan berkaitan: "tutorial bootstrap"]

Prasyarat

Sudah tentu kami perlu memperkenalkan Bootstrap dan jQuery di sini

    <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">

Salin selepas log masuk

1. Senarai lungsur pilihan item tunggal asas

Hanya muat naik pemaparan gif dahulu

Analisis mendalam pemilihan senarai juntai bawah dalam Bootstrap

1.1 kod 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>

Salin selepas log masuk

kawalan borang ialah gaya css yang disertakan dengan bootstrap
Kami akan mendapati ia tidak mempunyai ruang letak, kami boleh menambah ruang letak padanya dengan cara berikut

<option value="-1" disabled selected hidden>请选择</option>

Salin selepas log masuk

Nilai warna ruang letak agak ringan, jadi kami menambah css padanya, form-control-placeholder

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

Salin selepas log masuk

Selepas menambahnya, Anda akan mendapati bahawa nilai warna dalam senarai juntai bawah juga telah berubah. Kemudian kita boleh menambah nilai warna kita sendiri pada pilihan dan ia tidak akan berubah

style="color: black;"

Salin selepas log masuk

Kod 1.2 js untuk memantau dan mendapatkan nilai

Apabila kita memilih value , kotak akan menjadi hitam Jika anda mengklik Reset, ia akan bertukar menjadi kelabu Pada masa ini, buat monitor untuk kotak input. Pendengar ini tidak akan dicetuskan apabila anda mengklik tetapkan semula, jadi saya meletakkannya dalam kaedah tetapan semula apabila ia bertukar menjadi kelabu. black_color dan gray_color ialah dua gaya css Hanya terdapat nilai warna

    $("#selectLeo").on(&#39;change&#39;, function () {
        if ($(this).val() != -1) {
            //这里是默认的
            $(&#39;#selectLeo&#39;).addClass(&#39;black_color&#39;).removeClass(&#39;gray_color&#39;)
        }
    })

Salin selepas log masuk

Apabila anda mengklik butang hantar, anda boleh mendapatkan nilai yang dipilih pada masa ini dan singleText diletakkan oleh saya 2 teks paparan

    $(&#39;#submit_single_select&#39;).click(function () {
        var options = $(&#39;#selectLeo option:selected&#39;)
        $(&#39;#singleValue&#39;).html(&#39;当前选中的value: &#39;+options.val())
        $(&#39;#singleText&#39;).html(&#39;当前选中的text: &#39;+options.text())
        console.log(options.val())
        console.log(options.text())
    })

Salin selepas log masuk

Apabila kita mengklik set semula, kita perlu kembali ke tempat letak dan warna berubah kembali kepada kelabu

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

Salin selepas log masuk

1.3 Cara mengubah suai senarai lungsur: tuding

Alihkan tetikus ke atas Pilihan lalai ialah fon putih dan latar belakang biru muda. Semasa saya mula belajar, saya dapati banyak maklumat, tetapi kebanyakannya adalah karut, jadi jika ada pakar di sini yang telah mengubah suai gaya css secara ringkas, anda boleh memberitahu saya di ruangan komen. Saya mempunyai rancangan di sini, iaitu menggunakan menu drop-down input untuk melaksanakan fungsi senarai drop-down ini, dalam kes itu, hover boleh diubah mengikut kehendak anda.

Baiklah, pilihan senarai lungsur turun sehala sudah tamat. awak tak faham.

2 Pilihan berbilang, senarai lungsur

Begitu juga, mula-mula buat pemaparan gif

Analisis mendalam pemilihan senarai juntai bawah dalam Bootstrap < . pilih. Alamat github yang dipilih ialah:

bootstrap-select

, dipetik seperti berikut:

<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>

Salin selepas log masuk

Kod html 2.1

        <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>

Salin selepas log masuk

lulus berbilang="berbilang" ditetapkan kepada berbilang pilihan; class="selectpicker form-control" ialah gaya CSS bootstrap sendiri="Sila pilih" ialah pemegang tempat kami

Tukar nilai warna pemegang tempat; melalui gaya css berikut

.filter-option-inner-inner{
    color: #ccc;
}

Salin selepas log masuk

Gunakan gaya css di bawah untuk menukar warna fon senarai lungsur turun

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: black;
    white-space: nowrap;
}

Salin selepas log masuk

Gunakan gaya css di bawah untuk menukar warna fon selepas menggerakkan tetikus ke atas Paparan fon dan warna latar belakang

Baiklah, ini melengkapkan gaya

.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);
}

Salin selepas log masuk

2.2 Pemantauan berbilang pilihan dan mendapatkan nilai

Pemantauan untuk senarai juntai bawah berbilang pilihan Apabila pemantauan mempunyai nilai yang dipilih, warna fon berubah kepada hitam, dan apabila tiada nilai, ia berubah menjadi kelabu. Ini sedikit berbeza daripada pilihan tunggal Apabila ditetapkan semula, pemantauan ini berkesan

    $(&#39;#selectLeo_more&#39;).on(&#39;change&#39;, function () {
        if ($(this).val().length != 0) {
            //这里是默认的
            $(&#39;.filter-option-inner-inner&#39;).css("color", "black")
        } else {
            $(&#39;.filter-option-inner-inner&#39;).css("color", "#ccc")
        }
    })

Salin selepas log masuk

Klik hantar untuk mendapatkan nilai yang dipilih

Apabila anda mengklik set semula, kosongkan kotak input

    $(&#39;#submit_mult_select&#39;).click(function () {
        $(&#39;#multValue&#39;).html(&#39;当前选中的value: &#39;+$(&#39;#selectLeo_more&#39;).val())
        $(&#39;#multText&#39;).html(&#39;当前选中的text: &#39;+$(&#39;[data-id|=selectLeo_more&#39;).text())
        console.log($(&#39;#selectLeo_more&#39;).val())
    })

Salin selepas log masuk

Pengenalan kepada Pengaturcaraan

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

Salin selepas log masuk

! !

Atas ialah kandungan terperinci Analisis mendalam pemilihan senarai juntai bawah dalam Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!