Analyse approfondie de la sélection de la liste déroulante dans Bootstrap

Cet article vous donnera une introduction détaillée à la sélection de la liste déroulante dans Bootstrap, qui convient aux débutants et j'espère qu'elle sera utile à tout le monde !

Avant-propos : Je développe Android depuis de nombreuses années et j'ai commencé à apprendre le front-end Web à partir de zéro. J'ai également constaté que de nombreux blogs sont essentiellement copiés et reproduits, et qu'ils ne sont pas clairs. Je me suis donc concentré sur la rédaction des choses qui me semblent floues sur le blog actuel. Après avoir appris le framework Vue, j'ai commencé à apprendre le développement de sites Web officiels natifs. Cependant, lorsque j'ai entendu parler de la sélection de Bootstrap, j'ai senti que les informations en ligne étaient déroutantes, ce qui était très déroutant pour les débutants. D'où cet article. [Recommandations associées : "Tutoriel bootstrap"]

Prérequis

Bien sûr, nous devons introduire Bootstrap et jQuery ici

    <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. Liste déroulante de base de sélection d'un seul élément

Téléchargez simplement le gif. rendu en premier

Code HTML 1.1

        <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 est le style CSS fourni avec bootstrap
• Nous constaterons qu'il manque d'espace réservé, nous pouvons y ajouter un espace réservé de la manière suivante

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

• placeholder La valeur de couleur est relativement légère, puis nous y ajoutons un css, form-control-placeholder

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

• Après l'avoir ajouté, vous constaterez que la valeur de couleur dans la liste déroulante a également changé. Ensuite, nous pouvons ajouter notre propre valeur de couleur à l'option et cela ne changera pas

style="color: black;"

Code js 1.2 pour surveiller et obtenir la valeur

• Lorsque nous sélectionnons la valeur, la boîte deviendra noire si nous cliquons sur réinitialiser, elle. changera Return en gris. À ce moment, créez un moniteur pour la zone de saisie. Si valeur ==-1, elle sera grise. Cet écouteur ne sera pas déclenché lorsque vous cliquerez sur réinitialiser, je le mets donc dans la méthode de réinitialisation lorsqu'il devient gris. black_color et gray_color sont deux styles CSS. Ils ne contiennent que des valeurs de couleur

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

• Lorsque vous cliquez sur le bouton Soumettre, vous obtenez la valeur actuellement sélectionnée et la valeur du texte singleValue et singleText sont les deux textes d'affichage que j'ai placés
.

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

• Cliquez Lors de la réinitialisation, nous devons revenir à l'espace réservé et changer la couleur en gris

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

1.3 Comment modifier la liste déroulante : survolez

Déplacez la souris vers le haut. La valeur par défaut est blanche. police et fond bleu clair. Quand j'ai commencé à apprendre, j'ai trouvé beaucoup d'informations, mais la plupart n'avaient aucun sens, donc s'il y a des experts ici qui ont modifié le style CSS de manière concise, vous pouvez me le dire dans la zone de commentaires. J'ai un plan ici, c'est-à-dire que vous pouvez utiliser le menu saisie + déroulant pour implémenter cette fonction de liste déroulante. Dans ce cas, le survol peut être modifié comme vous le souhaitez.

OK, la sélection dans la liste déroulante à sens unique est terminée. Vous ne comprenez pas.

2. Sélection multiple, liste déroulante

De même, commençons par le rendu gif

Lors de l'utilisation de cette liste déroulante à sélection multiple, nous devons également faire référence à bootstrap- select, pour les débutants Pour moi, je trouve un peu étrange pourquoi le site officiel cite le package complet de bootstrap et n'inclut pas cette sélection. L'adresse github de cette sélection est : bootstrap-select, citée comme suit

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

• Défini sur sélection multiple via multiple="multiple" ; class="selectpicker form-control" est le propre style CSS de bootstrap="Veuillez sélectionner" est notre espace réservé
• Modifiez la valeur de couleur du ; espace réservé via le style CSS suivant

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

• Utilisez le style CSS ci-dessous pour modifier la couleur de la police de la liste déroulante

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

• Utilisez le CSS ci-dessous pour modifier l'affichage de la police et de la couleur d'arrière-plan après avoir déplacé la souris vers le haut

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

D'accord, cela complète le style

2.2 Surveillance de la sélection multi-sélection et obtention des valeurs

• Surveillance des listes déroulantes à sélection multiple Lors de la surveillance ici, lorsqu'il y a une valeur de sélection, la police. la couleur sera changée en noir, et lorsqu'il n'y a pas de valeur, elle sera grise. Ceci est un peu différent de la sélection unique. Lors de la réinitialisation, cette surveillance est efficace

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

• Cliquez sur Soumettre pour obtenir la valeur sélectionnée

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

.

• Lorsque vous cliquez sur Réinitialiser, décochez la zone de saisie

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

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!