Maison > interface Web > js tutoriel > Utilisez Jquery et CSS pour implémenter le bouton de réinitialisation de la zone de sélection (exemple de code)

Utilisez Jquery et CSS pour implémenter le bouton de réinitialisation de la zone de sélection (exemple de code)

不言
Libérer: 2018-11-07 17:41:34
original
2612 Les gens l'ont consulté

Comment implémenter un moyen simple de créer un bouton de réinitialisation sur la zone de sélection sans afficher la zone de sélection ? Cet article partagera avec vous la méthode (code) d'utilisation de Jquery et CSS pour implémenter le bouton de réinitialisation de la boîte de sélection. Les amis dans le besoin peuvent s'y référer.

Le code est le suivant :

HTML

<select>
    <option value="">Select a color..</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>
<div class="displaySelect">
    <span class="value"></span>
    <span class="close">⊗</span>
 </div>
Copier après la connexion

CSS

.displaySelect{
    display:none;
    border: 1px solid;
    }
    select, .displaySelect {
    text-indent:20px;
    font-family:helvetica;
    }
    select, .displaySelect{
    font-size:22px;
    height:50px;
    line-height:50px;
    width:100%;
    text-transform:capitalize;
    }
    .displaySelect .close{
    display:block;
    float:right;
    width:10%;
    text-align:center;
    font-size:52px;
    cursor:pointer;
    }
Copier après la connexion

Jquery

var select        = $(&#39;select&#39;);
var selectResults = $(&#39;.displaySelect&#39;);
var selectValue   = $(&#39;.value&#39;, selectResults);
var selectClose   = $(&#39;.close&#39;, selectResults);
select.on(&#39;change&#39;, function() {
    $(this).add(selectResults).toggle();
    selectValue.html(this.value);
    });
    selectClose.click(function(){
    select.val(&#39;&#39;).fadeIn();
    selectResults.toggle();
    selectValue.html(&#39;&#39;);
    });
Copier après la connexion

L'effet est le suivant :

Utilisez Jquery et CSS pour implémenter le bouton de réinitialisation de la zone de sélection (exemple de code)


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:php.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