宁泽林_NiZerin - 互联网技术博客

  • 首页
  • 交流群
  • 关于我
  • 留言版
  1. 首页
  2. JavaScript
  3. 正文

使用Jquery和CSS实现选择框重置按钮(代码实例)

2018年11月7日 1973点热度 0人点赞 0条评论

如何实现一种在选择框上创建重置按钮而不显示选择框的简单方法?本篇文章就来给大家分享使用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('');
    });

效果如下:
GIF.gif
以上就是使用Jquery和CSS实现选择框重置按钮(代码实例)的详细内容,更多请关注泽林博客其它相关文章!
 

转载:php中文网

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: Jquery
最后更新:2018年11月7日

NiZerin

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

NiZerin

这个人很懒,什么都没留下

本站小程序

   

内容将于本站同步

本站公众号

每周推送最新前沿技术文章

最新 热点 随机
最新 热点 随机
Laravel 8 性能优化自查清单 Laravel 7 已停止维护 Laravel: 新的发行时间表(2021 后改为一年一更) PHP8 已经发布,来看看有哪些新特性吧 Laravel 8 将于9月8日发布! Laravel 重大安全更新
Laravel 7 已停止维护Laravel: 新的发行时间表(2021 后改为一年一更)Laravel 8 性能优化自查清单
Flutter 基础(九)资源和图片 [译]Swoole 是 PHP 中的 Node.js? 你应该知道的 Git 的奇技淫巧 ☘️☘️☘️ 分享一个生成二维码的插件–QRCode.js 解析 Node.js 通过 axios 实现网络请求 玩转 PHP 网络编程全套之 I/O 复用
标签聚合
wordpress php go react node laravel flutter javascript translations vue
最近评论
发布于 1 周前(04月09日) 还不错
发布于 3 周前(03月25日) > 您可以添加到收藏夹,以后常来看看 我添加啦,常来,一定。
发布于 4 周前(03月19日) 不错
发布于 1 个月前(03月07日) 哈哈哈哈
发布于 1 个月前(03月07日) 哈哈哈哈哈
友情链接
  • 科学上网
  • 阿里云特惠
  • 宝塔运维特惠
  • PHP函数字典

COPYRIGHT © 2021 宁泽林_NiZerin - 互联网技术博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS