您的位置：首页 > Web前端 > JavaScript

js动态生成级联下拉列表

2011-12-05 00:11 766 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航