Analisis mendalam pemilihan senarai juntai bawah dalam Bootstrap

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

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

1. Senarai lungsur pilihan item tunggal asas

Hanya muat naik pemaparan gif dahulu

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>

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

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

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

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

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('change', function () {
        if ($(this).val() != -1) {
            //这里是默认的
            $('#selectLeo').addClass('black_color').removeClass('gray_color')
        }
    })

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

    $('#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())
    })

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

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

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

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>

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>

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

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

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

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

    $('#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")
        }
    })

Klik hantar untuk mendapatkan nilai yang dipilih

<.>

Apabila anda mengklik set semula, kosongkan kotak input

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

• Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan

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

! !

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!