var outName=""
window.onload=function(){
var len = document.getElementsByTagName('a').length
for(var i=0i<leni++)
{
document.getElementsByTagName('a')[i].id='a'+i
document.getElementsByTagName('a')[i].onclick=function(){
outName=Number(this.id.substring(1,this.id.length))
}
}
}
function appendLi(){
var ttt = document.getElementById('ttt').value
var ul = document.createElement('ul')
var li = document.createElement('li')
li.innerHTML=ttt
ul.appendChild(li)
document.getElementById('a'+outName).parentElement.appendChild(ul)
}
</script>
</head>
<body>
<div class="container">
<ul style="display: block">
<li><a href="#" style="font-size: 12px padding-left: 10px">人事管理</a></li>
<li><a href="#" style="font-size: 12px padding-left: 10px">部门管理</a></li>
<li><a href="#" style="font-size: 12px padding-left: 10px">考勤管理</a></li>
</ul>
</div>
<label>
<input type="checkbox" value="" />根目录</label>
<label><br>
<input id="ttt" type="text" value="" /><input type="button" value="添加" onclick="appendLi()"/></label>
</body>
1直接在body ready的时候运行 ShowMenu(obj,noid)这个函数，就可以直接打开了2目测是
for(var i=0i<ul.lengthi++){if(i!=n){ul[i].className = "no"}}
for(var i=0i<span.lengthi++){if(i!=n){span[i].className = "no"}}
这2句把其他的都设置成不显示了
这个，其实比较简单
数据上来说，相当于是一个多维数组
比如，系 ：
计算机，中文，英语
然后是专业：
计算机 -> 软件工程，xxx专业 ...
中文 -> 汉语言文学，xxx专业 ...
数据库在设计上，你可以将他们都放在一个表里面，可以有这些列
id 唯一id
name 名称，可以是专业名称，也可以是系名称
parent 指定如果是专业，是数据那个系，这里可以存成系的id，
如果是系，那么这里直接填0，表示就可以
这样的话，一个demo数据
id name parent
1 计算机系 0
2 软件工程 1
这样，上边，后台的数据就这个节奏就可以满足，如果专业还有细分，那这个结构也可以满足
前台显示的时候，这里分成俩个select来显示就可以
第一个select用来显示系，查询parent为0的数据，显示到select里面就可以
第二个select用来显示系的专业，查询的时候，将第一个select的系id拿到，直接数据库里面查询parent为第一个select选择系的id的数据
demo
选择系：<select id="department" onchange="change(this)"></select>
选择专业：
<select id="professional"></select> //用js读取数据，然后生成代码
//根据parentid，读取数据，然后返回
function getData(parentId , callback){
$.ajax({
url : 'test.do',//后台数据地址
data : {parentId : parentId},//请求parentid的数据
success : function(result){
alert(result)
callback(result)
}
})
}
function renderOptions(arr , el){//生成select 的 option
el.empty()
$.each(data , function(index , item){
$('<option/>').attr({
value : item.id
}).html(item.name).appendTo(el)
})
}
var department = $('#department')//系的select
getData(0 , function(data){//请求系的数据
department.empty()
renderOptions(data , department)//这里生成系的select
})
var professional = $('#professional')//专业的select
function change(el){//当系变化的时候
var parentId = $(el).val()//这里得到选择的系的id
getData(parentId , function(data){
professional.empty()
renderOptions(data , professional )//这里生成专业的select
})
}
就是这样的原理
后台还需要一个查询，就是根据parentid查询数据，就可以了
