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

测试:

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>

----------------------------------Hongten--------------------------------------------

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

----------------------------------Hongten--------------------------------------------

测试结果:

其默认选择是:按院系

这是如果我们选择的是:不按院系,即按:职工号或姓名,那么,

这时就会隐藏:

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

----------------------------------Hongten--------------------------------------------

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

JS如何模拟鼠标点击X,Y坐标

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

2.2K50
来自专栏技术墨客

React——Flow代码静态检查 转

Flow是Facebook开源的静态代码检查工具,他的作用是在运行代码之前对React组件以及Jsx语法进行静态代码的检查以发现一些可能存在的问题。Flow可以...

12810
来自专栏Ryan Miao

照着官方文档学习react

准备 先要准备环境。搭建一个基于webpack的react环境:Hello ReactJS. 一些要点 我在想是否应该完整的记录照抄的过程呢。毕竟已经开始一段,...

38470
来自专栏技术博客

ExtJs二(实现登录)

  在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次...

23610
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(4)---自定义用户交互

你可以从多方面自定义用户界面来自定义用户与Spread控件的交互方式。同时,你还可以自定义如何处理用户交互方式。 设置允许用户进行的操作 下面的列表总结了通过控...

22060
来自专栏闻道于事

JavaScript面向对象之Windows对象

JavaScript之Window对象 首先我们先了解一个概念:事件。 事件,就是把一段代码设置好,满足条件时触发。或者说,事件是可以被 JavaScript ...

32090
来自专栏熊二哥

Javascript快速入门(下篇)

Javascript, cheer up。 ? ? Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用...

21270
来自专栏韦弦的偶尔分享

微信小程序 router 封装

根据相对路径我们知道,当前路径内的/个数代表当前路径的层级,添加相同个数的../即可到达根目录那为了实现我们的目的,可按如下操作:

19620
来自专栏hbbliyong

Android Studio 快捷键

Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入...

31260
来自专栏静晴轩

Android Studio快捷键

最常用快捷键 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O ...

36570

扫码关注云+社区

领取腾讯云代金券