文档章节

jquery 如何设置下拉框隐藏

 得意小生
发布于 2015/07/31 01:56
字数 326
阅读 79
收藏 0

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

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

示例代码如下

  1. 创建Html元素

    <div class="box">
    	<span>点击按钮可以显示或隐藏下拉框:</span><br>
    	<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默认是被隐藏的

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

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


本文转载自:http://zhidao.baidu.com/link?url=Wz3LA4l105lXgqdAQo7WU7SkKPkyc7Oh0bo3SaNyl1ana-gwRhtFvujeYIk9VG8n...

粉丝 1
博文 8
码字总数 0
作品 0
南宁
私信 提问
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
113
0
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
434
0
jquery 学习

1.常见的jquery 对象操作 jquery取radio单选按钮的值 $("input[name='items']:checked").val(); jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相......

晨曦之光
2012/03/09
92
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
2018/09/08
0
0
12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用...

红薯
2012/03/28
5.8K
8

没有更多内容

加载失败,请刷新页面

加载更多

DRF 获取DefaultRouter 对应的url

命令 python manage.py show_urls urls.py from user.router import core_routerurlpatterns = [ path('user/login/', views.LoginView.as_view(), name='login'), path('user/log......

hyhlinux
56分钟前
4
0
uniapp登录流程详解uni.login

uni.login(OBJECT) 登录 H5平台登陆注意事项: 微信内嵌浏览器运行H5版时,可通过js sdk实现微信登陆,需要引入一个单独的js,详见 普通浏览器上实现微信登陆,并非开放API,需要向微信申请,...

达达前端小酒馆
56分钟前
5
0
目标检测中 yolo 的mAP是什么含义?

mAP定义及相关概念 P => precision,即 准确率 R => recall,即 召回率 PR曲线 = >即 以 precision 和 recall 作为 纵、横轴坐标 的二维曲线。一般来说,precision 和 recall 是 鱼与熊掌 的...

小松1
今天
4
0
用jdk1.8的断言来做非空判断

Assert.notNull(user, "没有获得登录用户信息"); 看源码如下: public static void notNull(Object object, String message) { if (object == null) { throw new IllegalArgum......

architect刘源源
今天
6
0
2018NOIP各省一等奖分数线

提高组 普及组

SamXIAO
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部