JS 如果改變span標(biāo)簽的是否隱藏屬性
更新時(shí)間:2011年10月06日 23:15:59 作者:
JS 如果改變span標(biāo)簽的是否隱藏屬性,大家根據(jù)需要選擇使用。
測(cè)試:
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">職工號(hào)</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ù)直接設(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="";
}
}
測(cè)試結(jié)果:
其默認(rèn)選擇是:按院系
這是如果我們選擇的是:不按院系,即按:職工號(hào)或姓名,那么,
這時(shí)就會(huì)隱藏:
<span id="yxsh" style=display:none>...</span>
并且<span id="key" style=display:>...</span>
如果我們是選擇:按院系,即默認(rèn)情況下
那么,結(jié)果是:
<span id="yxsh" style=display:>...</span>
并且<span id="key" style=display:none>...</span>
test.html
代碼:
復(fù)制代碼 代碼如下:
<!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">職工號(hào)</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
代碼:
復(fù)制代碼 代碼如下:
//這是用了自定義的方法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ù)直接設(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="";
}
}
測(cè)試結(jié)果:
其默認(rèn)選擇是:按院系
這是如果我們選擇的是:不按院系,即按:職工號(hào)或姓名,那么,
這時(shí)就會(huì)隱藏:
<span id="yxsh" style=display:none>...</span>
并且<span id="key" style=display:>...</span>
如果我們是選擇:按院系,即默認(rèn)情況下
那么,結(jié)果是:
<span id="yxsh" style=display:>...</span>
并且<span id="key" style=display:none>...</span>
您可能感興趣的文章:
- js獲取html的span標(biāo)簽的值方法(超簡(jiǎn)單)
- javascript給span標(biāo)簽賦值的方法
- js動(dòng)態(tài)修改表格行colspan列跨度的方法
- JS 獲取span標(biāo)簽中的值的代碼 支持ie與firefox
- javascript 動(dòng)態(tài)table添加colspan\rowspan 參數(shù)的方法
- JScript|Event]面向事件驅(qū)動(dòng)的編程(二)--實(shí)例講解:將span模擬成超連接
- element-ui table span-method(行合并)的實(shí)現(xiàn)代碼
- Js代碼中的span拼接問(wèn)題解決
相關(guān)文章
面向?qū)ο罄^承實(shí)例(a如何繼承b問(wèn)題)(自寫(xiě))
經(jīng)常會(huì)看到a如何繼承b的問(wèn)題;決定寫(xiě)一下,其實(shí)繼承就是繼承父級(jí)的屬性和方法,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07JavaScript使用Blob文件流下載txt、pdf、圖片等文件,自定義下載文件名
JavaScript使用Blob文件流下載txt、pdf、圖片等格式文件,同時(shí)自定義下載文件名,2023-08-08JavaScript數(shù)據(jù)類型轉(zhuǎn)換實(shí)例(其他類型轉(zhuǎn)字符串、數(shù)值型、布爾類型)
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,本文分別介紹了其他類型轉(zhuǎn)為字符串、其他類型轉(zhuǎn)為數(shù)值型以及其他類型轉(zhuǎn)為布爾類型的方法,需要的朋友可以參考下2021-07-07ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)
這篇文章主要介紹了ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)的相關(guān)資料,需要的朋友可以參考下2015-06-06兼容Firefox的Javascript XSLT 處理XML文件
這篇文章主要介紹了兼容Firefox的Javascript XSLT 處理XML文件,需要的朋友可以參考下2014-12-12微信小程序?qū)崿F(xiàn)通過(guò)js操作wxml的wxss屬性示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)通過(guò)js操作wxml的wxss屬性,結(jié)合實(shí)例形式分析了微信小程序使用js操作wxml的wxss屬性相關(guān)原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-12-12