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 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
angular之ng-template模板加载
Nov 09 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
Python实现类继承实例
2014/07/04 Python
python实现批量改文件名称的方法
2015/05/25 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python数据可视化之画图
2019/01/15 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
奥巴马演讲稿
2014/01/08 职场文书
网络宣传方案
2014/03/15 职场文书
创建文明城市倡议书
2015/04/28 职场文书
退货证明模板
2015/06/23 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL