一、表單對應顯示
部分效果圖：
代碼實現：定義方法，通過if判斷語句分項顯示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表單對應顯示</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange);
$("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange);
});
var eDropLangChange = function(){
var selectedValue = $(this).val();
$("#dropFrame").children("span").each(function(){
$(this).children().clone().replaceAll($(this));
});
if(parseInt(selectedValue) != 0){
$("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){
$(this).wrap("<span style='display:none'></span>");
});
}
};
var eDropFrameChange = function(){
$("#dropLang").val($(this).children("option:selected").attr("parentid"));
};
</script>
</head>
<body>
<div>
<select id="dropLang">
<option selected="selected" value="0"><請選擇></option>
<option value="1">Javascript</option>
<option value="2">Java</option>
<option value="3">C#</option>
</select>
<select id="dropFrame">
<option selected="selected" value="0"><請選擇></option>
<option value="1" parentid="1">JQuery</option>
<option value="2" parentid="1">Prototype</option>
<option value="3" parentid="2">Struts</option>
<option value="4" parentid="2">Spring</option>
<option value="5" parentid="2">Velocity</option>
<option value="6" parentid="2">Hibernate</option>
<option value="7" parentid="3">ASP.NET MVC</option>
<option value="8" parentid="3">Castle</option>
</select>
</div>
</body>
</html>
二、表單對應顯隱
部分效果圖：
代碼實現：定義對應獲取id，判斷value值，再顯隱
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="majianan">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
var sname = [];
sname.push('s1');
sname.push('s2');
sname.push('s3');
sname.push('s4');
function setselect(obj){
var flag = false;
for(var i=0;i<sname.length;i++){
if(sname[i]==obj){
if(document.getElementById(sname[i]).value==3 || document.getElementById(sname[i]).value==4){
flag = true;
}
}else{
continue;
}
}
if(flag){
for(var i=0;i<sname.length;i++){
if(sname[i]==obj) continue;
else{
document.getElementById(sname[i]).disabled = true;
}
}
}else{
for(var i=0;i<sname.length;i++){
document.getElementById(sname[i]).disabled = false;
}
}
}
</script>
</HEAD>
<BODY>
<SELECT id='s1' onChange="setselect(this.id);">
<option value='1'>自考</option>
<option value='2'>成考</option>
<option value='3'>四級英語</option>
<option value='4'>計算機等級</option>
</SELECT>
<SELECT id='s2' onChange="setselect(this.id);">
<option value='1'>op1</option>
<option value='2'>op2</option>
<option value='3'>op3</option>
<option value='4'>op4</option>
</SELECT>
<SELECT id='s3' onChange="setselect(this.id);">
<option value='1'>op1</option>
<option value='2'>op2</option>
<option value='3'>op3</option>
<option value='4'>op4</option>
</SELECT>
<SELECT id='s4' onChange="setselect(this.id);">
<option value='1'>op1</option>
<option value='2'>op2</option>
<option value='3'>op3</option>
<option value='4'>op4</option>
</SELECT>
</BODY>
</HTML>