php注册页面重置按钮代码,使用Jquery和CSS实现选择框重置按钮（代码实例）

如何实现一种在选择框上创建重置按钮而不显示选择框的简单方法？本篇文章就来给大家分享使用Jquery和CSS实现选择框重置按钮的方法(代码)，有需要的朋友可以参考一下。

代码如下：

HTML

Select a color..

Red

Green

Blue

⊗

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;

}

Jqueryvar select = $('select');

var selectResults = $('.displaySelect');

var selectValue = $('.value', selectResults);

var selectClose = $('.close', selectResults);

select.on('change', function() {

$(this).add(selectResults).toggle();

selectValue.html(this.value);

});

selectClose.click(function(){

select.val('').fadeIn();

selectResults.toggle();

selectValue.html('');

});

效果如下：