Use Jquery and CSS to implement the selection box reset button (code example)-JS Tutorial-php.cn

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

不言

Release： 2018-11-07 17:41:34

Original

2538 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!