- <!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>
js动态生成级联下拉列表
最新推荐文章于 2021-12-03 00:37:25 发布