js动态生成级联下拉列表
来源：互联网 发布：centos搭建php服务器 编辑：程序博客网 时间：2024/04/30 08:53
<!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>
