标签：
在web开发中我们经常会遇到页面的一个二级联动技术，二级联动字面解释就是说我在选择一级select不同的option，下面的二级option的属性值在进行相应的变动。
下面我先简述一下其中的原理，最后我们再贴代码。
首先一级和二级是两个<select>标签。一级<select>标签的<option>发生变化的时候，二级<select>的option就会发生变化，我们首先做的是在一级<select>标签中加入 “onchange()”方法，来进行二级<select>中<option>属性值的获取。这里需要注意的是，每次一级<selelct>发生变化的时候，二级的所有<option>的属性值都需要去除，不去除的后果，大家可以自己去做一下看看，毕竟实践出真知。获取相对应的二级<select>中<option>的属性值后，我们做的就是创造<option>了。
下面上代码了
<h2>一级部门:<select id="superdept" onchange="getsecond()">
<option>选择一级部门</option>
<option value="1>A部门</option>
<option value="B部门</option>
<option value=3>C部门</option>
</select><br><h2>
<h2>二级部门:<select id="dept">
</select><br><h2>
function getsecond(){
var superdept = $("#superdept option:selected").attr("value"); //获取一级部门选中的<option>的属性value
$.ajax({ //AJAX获取二级的部门信息。 注意：这里的ajax采用的是jquery里面的方法，使用前需要导入jquery库。
url:‘GetSeconds‘,
type:‘POST‘,
dataType:‘JSON‘,
data:{
superdept:superdept
},
success:function (res){
var dept = document.getElementById("dept") //获取二级
var deptlength = dept.options.length;
if(deptlength >0){ //去除二级的<optioin>的属性值
for( var j=0;j<deptlength;j++){
dept.options.remove(0)
}
}
var tt = eval(res); //这边是以json格式返回的，所以要转为数组
for(var i = 0;i<tt.length;i++){ //创建二级的<option>
addoption(tt[i].departmentinfoid,tt[i].departmentname)
}
}
})
}
function addoption(value,text){
var opt = document.createElement("option")
opt.value = value
opt.text = text
dept.options.add(opt)
}
这里有个要注意的是addoption() 里面有个dept有可能会报没有定义的错误，如果会发生这个错误，可以将addoption()整合到getsecond()方法里面去
标签：
原文地址：http://blog.csdn.net/xihuansuannai/article/details/51328864
