JS 如果改變span標簽的是否隱藏屬性

更新時間：2011年10月06日 23:15:59 作者：

JS 如果改變span標簽的是否隱藏屬性,大家根據(jù)需要選擇使用。

測試：
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=""; 
} 
//這是不用自定義函數(shù)直接設置是否隱藏 
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=""; 
} 
} 

測試結(jié)果：
其默認選擇是：按院系
這是如果我們選擇的是：不按院系，即按：職工號或姓名，那么，
這時就會隱藏：
...
并且...
如果我們是選擇：按院系，即默認情況下
那么，結(jié)果是：
...
并且...

您可能感興趣的文章:

相關(guān)文章

javascript實現(xiàn)回到頂部特效
當頁面特別長的時候，用戶想回到頁面頂部，必須得滾動好幾次滾動鍵才能回到頂部，如果在頁面右下角有個“返回頂部”的按鈕，用戶點擊一下，就可以回到頂部，對于用戶來說，是一個比較好的體驗。
2015-05-05
JS實現(xiàn)"上次操作未完成禁止新操作"邏輯特事特辦方案
這篇文章主要介紹了詳解JS如何實現(xiàn)"上次操作未完成禁止新操作"的邏輯及思路,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
一文詳解javascript語言中的類(class)
class類是一種抽象的體現(xiàn),用來表示具有相同特性的一類事物,是面向?qū)ο缶幊滩豢扇鄙俚墓ぞ?下面這篇文章主要介紹了javascript語言中類class的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-04-04
微信小程序引入模塊中wxml、wxss、js的方法示例
這篇文章主要介紹了微信小程序引入模塊中wxml、wxss、js的方法示例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
詳解JS截取字符串的三個方法substring,substr,slice
js中有三個截取字符的方法，分別是substring()、substr()、slice()，平時我們可能都用到過，但總是會對這些方法有點混淆。本文將詳細介紹一下這三者的區(qū)別，需要的可以參考一下
2022-03-03
JavaScript實現(xiàn)數(shù)組隨機排序的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組隨機排序的方法,涉及javascript數(shù)組遍歷與排序的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
JavaScript實現(xiàn)鼠標滑過圖片變換效果的方法
這篇文章主要介紹了JavaScript實現(xiàn)鼠標滑過圖片變換效果的方法,涉及javascript控制鼠標事件及樣式變換的技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調(diào)地獄與async?await修飾符，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript數(shù)組去重的幾種方法
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的幾種方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-04-04
Javascript中的對象和原型(二)
這篇文章給大家介紹了js中的對象和原型，從工廠模式，構(gòu)造函數(shù)方面展開話題，介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
2016-08-08