编程 Javascript

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=""; 
} 
}

测试结果：
其默认选择是：按院系
这是如果我们选择的是：不按院系，即按：职工号或姓名，那么，
这时就会隐藏：
...
并且...
如果我们是选择：按院系，即默认情况下
那么，结果是：
...
并且...

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

不错的新闻标题颜色效果

Dec 10 Javascript

jquery实现背景墙聚光灯效果示例分享

Mar 02 Javascript

js的[defer]和[async]属性

Nov 24 Javascript

js光标定位文本框回车表单提交问题的解决方法

May 11 Javascript

12种JavaScript常用的MVC框架比较分析

Nov 16 Javascript

JavaScript数组的定义及数字操作技巧

Jun 06 Javascript

bootstrap table小案例

Oct 21 Javascript

原生JS实现简单的倒计时功能示例

Aug 30 Javascript

Vue.js上传图片到阿里云OSS存储的方法示例

Dec 13 Javascript

axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

May 02 Javascript

Vue组件间数据传递的方式(3种)

Jul 13 Javascript

用JavaScript实现贪吃蛇游戏

Oct 23 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