用JS写的二极联动菜单 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">
function check(){
	var one=document.getElementById("one").value;
	if(one=="xingong"){
	var two=document.getElementById("two");
	two.options[0]=new Option("===请先选择学院===","");
	two.options[1]=new Option("计算机科学与技术（信息方向）","jisuanji");
    two.options[2]=new Option("计算机科学与技术（软件方向）","jisuanji");
	}
	if(one=="wudian"){
	var two=document.getElementById("two");
	two.options[0]=new Option("===请先选择学院===","");
	two.options[1]=new Option("教育物理学","jiaoyuwuli");
    two.options[2]=new Option("应用物理学","yingyongwuli");
	}
	if(one=="waiyuan"){
	var two=document.getElementById("two");
    two.options[0]=new Option("===请先选择学院===","");
	two.options[1]=new Option("英语","English");
    two.options[2]=new Option("日语","Japanese");
	}
}
</script>
<select name="one" id="one" onchange="check()">
<option value="">==请选择学院==</option>
<option value="xingong">信息科学与工程学院</option>
<option value="wudian">物理与电子科学学院</option>
<option value="waiyuan">外国语学院</option>
</select>
<select name="two" id="two" >
<option value="">===请先选择学院===</option>
</select>
</body>
</html>


使用jquery的话，可以这样写：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
</head>

<body>
<select name="first">
	<option value="one" selected>one</option>
	<option value="two">two</option>
	<option value="three">three</option>
	<option value="four">four</option>
</select>
<select name="second">
	<option value="one-one" selected>one-one</option>
	<option value="one-two">one-two</option>
	<option value="one-three">one-three</option>
</select>
<script type="text/javascript">
$("select[name=first] option").click(function(){
	var val = $(this).val();
	if(val == "one"){
		var $op1 = $("<option value='one-one' selected>one-one</option>");
		var $op2 = $("<option value='one-two' >one-two</option>"); 
		var $op3 = $("<option value='one-three'>one-three</option>"); 
	}
	if(val == "two"){
		var $op1 = $("<option value='two-one' selected>two-one</option>");
		var $op2 = $("<option value='two-two' >two-two</option>"); 
		var $op3 = $("<option value='two-three'>two-three</option>"); 
	}else if(val == "three"){
		var $op1 = $("<option value='three-one' selected>three-one</option>");
		var $op2 = $("<option value='three-two' >three-two</option>"); 
		var $op2 = $("<option value='three-three'>three-three</option>"); 
	}else if(val == "four"){
		var $op1 = $("<option value='foru-one' selected>foru-one</option>");
		var $op2 = $("<option value='foru-two' >foru-two</option>"); 
		var $op2 = $("<option value='foru-three'>foru-three</option>"); 
	}
	var $second = $("select[name=second]"); 
	$second.empty();
	$second.append($op1);
	$second.append($op2);
	$second.append($op3);
})
</script>
</body>
</html>


posted @ 2013-04-13 23:37  千手宇智波  阅读(171)  评论(0)    收藏  举报