jQuery设置下拉框显示与隐藏效果的方法分析


Posted in jQuery onSeptember 15, 2019

本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法。分享给大家供大家参考,具体如下:

jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() 方法则可以切换 hide() 和 show() 方法,也就是显示被隐藏的元素,并隐藏已显示的元素。

$("select").hide();   // 隐藏下拉框
$("select").show();   // 显示下拉框
$("select").toggle();  // 如果下拉框是显示的则隐藏之,反之亦然

示例代码如下

1. 创建Html元素

<div class="box">
  <span>点击按钮可以显示或隐藏下拉框:</span>
  <div class="content">
    <select name="test">
      <option value="0">请选择一个项目</option>
      <option value="1">我不选</option>
      <option value="2">选就选吧</option>
    </select>
  </div>
  <input type="button" value="显示">
</div>

2. 设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
select{width:150px;height:30px;border:1px solid #6699FF;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}

3. 编写jquery代码

$(function(){
  $("select").hide(); // 默认隐藏下拉框
  $(":button").click(function() {
    $("select").toggle(); // 已经显示则隐藏,隐藏了则显示
    $(this).val($(this).val()=="显示"?"隐藏":"显示");
  })
})

4. 观察效果

初始状态,select默认是被隐藏的

jQuery设置下拉框显示与隐藏效果的方法分析

点击显示按钮则出现select,同时按钮的说明文字变为“隐藏”

jQuery设置下拉框显示与隐藏效果的方法分析

点击“隐藏”,select消失,回到初始状态

jQuery设置下拉框显示与隐藏效果的方法分析

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 #jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
Jquery动态列功能完整实例
Aug 30 #jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 #jQuery
You might like
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
python list使用示例 list中找连续的数字
2014/01/27 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python基于百度云文字识别API
2018/12/13 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python API自动化框架总结
2019/11/12 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python如何从键盘获取输入实例
2020/06/18 Python
python 读取、写入txt文件的示例
2020/09/27 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
初中英语课后反思
2014/04/25 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android