如何使用Jquery和CSS实现选择框重置按钮-创新互联

今天就跟大家聊聊有关如何使用Jquery和CSS实现选择框重置按钮,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新互联建站专注于法库网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供法库营销型网站建设,法库网站制作、法库网页设计、法库网站官网定制、小程序设计服务,打造法库网络公司原创品牌,更为您提供法库网站排名全网营销落地服务。

代码如下:

HTML



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实现选择框重置按钮

看完上述内容,你们对如何使用Jquery和CSS实现选择框重置按钮有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


名称栏目:如何使用Jquery和CSS实现选择框重置按钮-创新互联
网址分享:http://scyanting.com/article/dsdijj.html