js动态生成级联下拉列表

来源：互联网发布：300英雄大帝偷跑数据编辑：程序博客网时间：2024/04/30 12:17

[html] view plaincopyprint?

<!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>

0 0