js中的二级联动技术的实现

        在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="2">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()方法里面去