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 相关文章推荐
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery更改元素属性attr()方法操作示例
May 22 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
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
python类和继承用法实例
2015/07/07 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
个人职业生涯规划书1500字
2013/12/31 职场文书
逃课上网检讨书
2014/02/20 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
安全守法证明
2015/06/23 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server