JS动态级联菜单是前端常用的一个功能，特此抽时间研究了下，附上代码
<html>
<head>
<meta charset="utf-8" />
<title>级联菜单</title>
</head>
<body>
<form name="caseSelect" class="J_select">
<p>
<select name="chapter">
<option value="0">请选择章</option>
</select>
<select name="section">
<option value="0">请选择节</option>
</select>
<select name="section_s">
<option value="0">请选择次节</option>
</select>
<select name="section_2s">
<option value="0">请选择次次节</option>
</select>
</p>
</form>
</body>
<script type="text/javascript" src="http://img3.cache.netease.com/game/img15/dahua-music/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// 原生
var data = [
{text:'1. DOM基础',value:'1',
list:[
{text:'1.1 文档树',value:'1.1',
list:[{text:'1.1.1 Hello World',value:'1.1.1',
list:[{text:'1.1.1.1 OK',value:'1.1.1.1'}]},
{text:'1.1.2 Web Dev',value:'1.1.2',list:[{text:'1.1.2.1 OK2',value:'1.1.2.1'}]}]},
{text:'1.2 节点操作',value:'1.2'},
{text:'1.3 元素遍历',value:'1.3'},
{text:'1.4 样式操作',value:'1.4'},
{text:'1.5 属性操作',value:'1.5'},
{text:'1.6 表单操作',value:'1.6'}
]},
{text:'2. 事件模型',value:'2',
list:[
{text:'2.1 事件类型',value:'2.1',list:[{text:'2.1.1 Hello World',value:'2.1.1',list:[{text:'2.1.1.1 OK',value:'2.1.1.1'}]}]},
{text:'2.2 事件模型',value:'2.2'},
{text:'2.3 事件应用',value:'2.3'}
]}
];
// 文档加载完之后执行
jQuery(function($){
var Jselect = $('.J_select select');
var JilianSelect = window.JilianSelect;
var chapterSelect = $('.J_select select').eq(0);
var sectionSelect = $('.J_select select').eq(1);
var JilianSelect = {
init:function(Jselect,data){
var self = this;
// var this.Jselect = Jselect;
// var this.data = data;
self.bind(data);
this.fillSelect(Jselect.eq(0),data);
},
fillSelect: function(select,list){
//清除原有数据
var option = select.find('option');
for(var i=option.length-1;i>0;i--){
option.eq(i).remove();
}
// 新增数据
$.each(list, function(i,item){
select.append('<option value="'+item.value+'">'+item.text+'</option>');
});
},
bind: function(data){
var self = this;
Jselect.change( function() {
// 下拉触发
var value = this.value;
var nextSelect = $(this).next();
// 多层方法1
// var tag = this.value.split('.');
// var str="data";
// for(var j=0;j<tag.length;j++){
// str+="["+(tag[j]-1)+"].list";
// }
// self.fillSelect(nextSelect,eval(str));
// 2层
// $.each(data, function(i, item) {
// if (value == item.value) {
// self.fillSelect(nextSelect,item.list);
// }
// });
// 多层方法2
function tochild(it){
$.each(it, function(i, item) {
if (value == item.value) {
self.fillSelect(nextSelect,item.list);
} else{
if(item.list)
tochild(item.list);
}
});
}
tochild(data);
// $.each(data, function(i, item) {
// if (value == item.value) {
// self.fillSelect(nextSelect,item.list);
// } else {
// // 第三个
// $.each(item.list, function(c, child) {
// if (value == child.value) {
// self.fillSelect(nextSelect,child.list);
// } else {
// // 第四个
// $.each(child.list, function(c4, child4) {
// if (value == child4.value) {
// self.fillSelect(nextSelect,child4.list);
// }
// })
// }
// })
// }
// });
});
}
}
JilianSelect.init(Jselect,data);
});
</script>
<html>