js select 联动

页面部分:

<body>
	<select id="parent" onchange="pc();">
		<option value="vpa" label="pa"></option>
		<option value="vpb" label="pb"></option>
		<option value="vpc" label="pc"></option>
	</select>
	<select id="child">
		<option value="cpaa" label="cpaa"></option>
	</select>
</body>

js部分:

<script type="text/javascript">
	function pc(){
		var parent = document.getElementById("parent");
		var child = document.getElementById("child");

		var pvalue = parent.value;
		var clength = child.options.length;
		if(clength > 0){
			for(var i = 0; i < clength; i++){
				child.options.remove(0);
			}
		}

		if(pvalue == "vpa"){
			var op = document.createElement("OPTION");
			op.text = "paa";
			op.value = "vpaa";
			child.options.add(op);
			var op1 = document.createElement("OPTION");
			op1.text = "paa1";
			op1.value = "vpaa1";
			child.options.add(op1);
			var op2 = document.createElement("OPTION");
			op2.text = "paa2";
			op2.value = "vpaa2";
			child.options.add(op2);
		}else if(pvalue == "vpb"){
			var op = document.createElement("OPTION");
			op.text = "pbb";
			op.value = "vpbb";
			child.options.add(op);
			var op2 = document.createElement("OPTION");
			op2.text = "pbb2";
			op2.value = "vpbb2";
			child.options.add(op2);
		}else if(pvalue == "vpc"){
			var op = document.createElement("OPTION");
			op.text = "pcc";
			op.value = "vpcc";
			child.options.add(op);
		}
	}
</script>
posted @ 2011-07-25 16:53  lostyue  阅读(1410)  评论(0)  编辑  收藏  举报