码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-05-06 12:22:02      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

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

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

标签:

原文地址:http://blog.csdn.net/xihuansuannai/article/details/51328864

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!