Maison > interface Web > Tutoriel d'amorçage > Analyse approfondie de la sélection de la liste déroulante dans Bootstrap

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

青灯夜游
Libérer: 2021-10-29 11:33:31
avant
4248 Les gens l'ont consulté

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 !

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

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">
Copier après la connexion

1. Liste déroulante de base de sélection d'un seul élément

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

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

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>
Copier après la connexion
  • 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>
Copier après la connexion
  • placeholder La valeur de couleur est relativement légère, puis nous y ajoutons un css, form-control-placeholder
.form-control-placeholder{
    color: #ccc;
}
Copier après la connexion
  • 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;"
Copier après la connexion

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(&#39;change&#39;, function () {
        if ($(this).val() != -1) {
            //这里是默认的
            $(&#39;#selectLeo&#39;).addClass(&#39;black_color&#39;).removeClass(&#39;gray_color&#39;)
        }
    })
Copier après la connexion
  • 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
  • .
    $(&#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())
    })
Copier après la connexion
  • Cliquez Lors de la réinitialisation, nous devons revenir à l'espace réservé et changer la couleur en gris
    $(&#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;)
    })
Copier après la connexion

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

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

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>
Copier après la connexion

. 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>
Copier après la connexion
  • 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;
}
Copier après la connexion
  • 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;
}
Copier après la connexion
  • 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);
}
Copier après la connexion

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
    $(&#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")
        }
    })
Copier après la connexion
  • Cliquez sur Soumettre pour obtenir la valeur sélectionnée
    $(&#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())
    })
Copier après la connexion
.
  • Lorsque vous cliquez sur Réinitialiser, décochez la zone de saisie
    $(&#39;#submit_mult_repet&#39;).click(function () {
        $(&#39;#selectLeo_more&#39;).selectpicker(&#39;deselectAll&#39;);
    })
Copier après la connexion

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!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal