使用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;    }

登录后复制

Jquery

立即学习“前端免费学习笔记（深入）”；

var 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('');    });

登录后复制

效果如下：

以上就是使用Jquery和CSS实现选择框重置按钮（代码实例）的详细内容，更多请关注【创想鸟】其它相关文章！