測試：
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>