JS 如果改变span标签的是否隐藏属性


Posted in Javascript onOctober 06, 2011

测试:
test.html
代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<SCRIPT LANGUAGE="JavaScript" src="js/Menu.js"></SCRIPT> 
</HEAD> 
<BODY> 
<table> 
<tr> 
<td> 
<form method="post" action="#"> 
查询类型<select id="selectType" name="selectType" onchange="isChang1(this.value)"> 
<option value="yxsh">按院系</option> 
<option value="zgh">职工号</option> 
<option value="xm">姓名</option> 
</select> 
<span id="yxsh" style=display:>院系 
<select id="depart" name="depart"> 
<option value="all">所有院系</option> 
<option value="123">123</option> 
<option value="123">123</option> 
<option value="123">123</option> 
<option value="123">123</option> 
<option value="123">123</option> 
</select> 
课程分配 
<select id="isAll" name="isAll"> 
<option value="all">所有</option> 
<option value="NO">未分配</option> 
<option value="YES">已分配</option> 
</select> 
</span> 
<span id="key" style=display:none> 
<input type="text" name="keyword" id="keyword"/> 
</span> 
<input type="submit" value="查询"/> 
</form> 
</BODY> 
</HTML>

js/Menu.js
代码:
//这是用了自定义的方法hideElement()和shwoElement() 
function isChang(values) 
{ 
if(values=="yxsh"){ 
hideElement("key"); 
showElement("yxsh"); 
}else{ 
hideElement("yxsh"); 
showElement("key"); 
} 
} 
//自定义方法hideElement() 
function hideElement(id){ 
document.getElementById(id).style.display="none"; 
} 
//自定义方法showElement() 
function showElement(id){ 
document.getElementById(id).style.display=""; 
} 
//这是不用自定义函数直接设置是否隐藏 
function isChang1(values) 
{ 
if(values=="yxsh"){ 
document.getElementById("yxsh").style.display=""; 
document.getElementById("key").style.display="none"; 
}else{ 
document.getElementById("yxsh").style.display="none"; 
document.getElementById("key").style.display=""; 
} 
}

测试结果:
其默认选择是:按院系
这是如果我们选择的是:不按院系,即按:职工号或姓名,那么,
这时就会隐藏:
<span id="yxsh" style=display:none>...</span>
并且<span id="key" style=display:>...</span>
如果我们是选择:按院系,即默认情况下
那么,结果是:
<span id="yxsh" style=display:>...</span>
并且<span id="key" style=display:none>...</span>
Javascript 相关文章推荐
input按钮的事件处理大全
Dec 10 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
vue+Element-ui实现登录注册表单
Nov 17 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 #Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 #Javascript
jQuery AjaxQueue改进步骤
Oct 06 #Javascript
json2.js的初步学习与了解
Oct 06 #Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 #Javascript
event.X和event.clientX的区别分析
Oct 06 #Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 #Javascript
You might like
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
javascript内存分配原理实例分析
2017/04/10 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python使用py2exe打包程序介绍
2014/11/20 Python
详解python中的线程
2018/02/10 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
美国现代家具购物网站:LexMod
2019/01/09 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
学校司机岗位职责
2013/11/14 职场文书
党员承诺书范文
2014/05/19 职场文书
银行求职信范文
2014/05/26 职场文书
离婚协议书范本样本
2014/08/19 职场文书
公司感谢信范文
2015/01/22 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis