js动态生成级联下拉列表

最新推荐文章于 2024-04-28 13:37:45 发布

iteye_19583

最新推荐文章于 2024-04-28 13:37:45 发布

阅读量88

点赞数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 下拉列表联动 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
	<div id="sel"></div>
</BODY>
</HTML>
<script>
	

	var otext1 = document.createTextNode("类别：");
	var select = document.createElement("select");
	var selOption1 = document.createElement("option");
		selOption1.value = "0";
		selOption1.innerHTML = "----请选择-----";
	var selOption2 = document.createElement("option");
		selOption2.value = "1";
		selOption2.innerHTML = "--蔬菜--";
	var selOption3 = document.createElement("option");
		selOption3.value = "2";
		selOption3.innerHTML = "--肉类--";
	var selOption4 = document.createElement("option");
		selOption4.value = "3";
		selOption4.innerHTML = "--蛋类--";
	
	select.appendChild(selOption1);
	select.appendChild(selOption2);
	select.appendChild(selOption3);
	select.appendChild(selOption4);

	var otext2 = document.createTextNode("分类：");
	var select2 = document.createElement("select");
	select2.id = "sel2";
	var selOption11 = document.createElement("option");
		selOption11.value = "0";
		selOption11.innerHTML = "----请选择-----";

	
	select2.appendChild(selOption11);
	

	var selDiv = document.getElementById("sel");
	selDiv.appendChild(otext1);
	selDiv.appendChild(select);
	selDiv.appendChild(otext2)
	selDiv.appendChild(select2);

	var ojson=[
			{id:1,name:'蔬菜',child:[{id:"1",name:"白菜"},{id:"2",name:"萝卜"},{id:"3",name:"菠菜"}]},
			{id:2,name:'肉类',child:[{id:"1",name:"猪肉"},{id:"2",name:"羊肉"},{id:"3",name:"牛肉"}]},
			{id:3,name:'蛋类',child:[{id:"1",name:"鸡蛋"},{id:"2",name:"鹅蛋"},{id:"3",name:"鸭蛋"}]}
		];

	select.onchange = function (){
		
		var objs = document.getElementById("sel2");
		objs.options.length = 1;
			
			var olen = ojson.length;
			for(var i=0;i<olen;i++){
				if(this.value == ojson[i].id){
					var ochild = ojson[i].child;
					var ochildlen = ochild.length;
					for(var j=0;j<ochildlen;j++){
						var childOption = document.createElement("option");
						childOption.value = ochild[j].id;
						childOption.innerHTML = ochild[j].name;
						objs.appendChild(childOption);
					}
				}
			}
	}


</script>