Heim > Web-Frontend > js-Tutorial > Verwenden Sie JQuery und CSS, um die Schaltfläche zum Zurücksetzen des Auswahlfelds zu implementieren (Codebeispiel).

Verwenden Sie JQuery und CSS, um die Schaltfläche zum Zurücksetzen des Auswahlfelds zu implementieren (Codebeispiel).

不言
Freigeben: 2018-11-07 17:41:34
Original
2613 Leute haben es durchsucht

Wie implementiert man eine einfache Möglichkeit, eine Reset-Schaltfläche im Auswahlfeld zu erstellen, ohne das Auswahlfeld anzuzeigen? In diesem Artikel erfahren Sie, wie Sie mit Jquery und CSS die Schaltfläche zum Zurücksetzen des Auswahlfelds implementieren. Freunde in Not können sich darauf beziehen.

Der Code lautet wie folgt:

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>
Nach dem Login kopieren

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;
    }
Nach dem Login kopieren

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;);
    });
Nach dem Login kopieren

Der Effekt ist wie folgt :

Verwenden Sie JQuery und CSS, um die Schaltfläche zum Zurücksetzen des Auswahlfelds zu implementieren (Codebeispiel).


Das obige ist der detaillierte Inhalt vonVerwenden Sie JQuery und CSS, um die Schaltfläche zum Zurücksetzen des Auswahlfelds zu implementieren (Codebeispiel).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage