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>

你可能感兴趣的:(select)