一、表单对应显示
部分效果图:
代码实现:定义方法,通过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>