Jquery和CSS实现选择框重置按钮功能
程序员文章站
2023-10-27 23:12:04
很多时候我们都会用到一个下拉选择，还有就是重置的功能，今天我们就给大家带来用jquery配合css实现的这个功能。
代码如下：
html
很多时候我们都会用到一个下拉选择，还有就是重置的功能，今天我们就给大家带来用jquery配合css实现的这个功能。
代码如下：
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>
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('');
});
效果如下：
以上就是本次的效果图片，感谢大家对的支持。
上一篇： 老公要离婚分居挽回要怎么做？