Home > Web Front-end > JS Tutorial > Use Jquery and CSS to implement the selection box reset button (code example)

Use Jquery and CSS to implement the selection box reset button (code example)

不言
Release: 2018-11-07 17:41:34
Original
2613 people have browsed it

How to implement a simple way to create a reset button on the select box without showing the select box? This article will share with you the method (code) of using Jquery and CSS to implement the selection box reset button. Friends in need can refer to it.

The code is as follows:

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>
Copy after login

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;
    }
Copy after login

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;);
    });
Copy after login

The effect is as follows:

Use Jquery and CSS to implement the selection box reset button (code example)


The above is the detailed content of Use Jquery and CSS to implement the selection box reset button (code example). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template