如何进行js动态生成option?如何实现二级连动?

何为二级连动?

首先要明白什么是二级连动!顾名思义,就是一个动,另外一个也跟着一起动

看下面的例子:

这里有一个“市级”的选择列表框,还有一个“县级”的选择列表框,如果“市级”的选择列表框中的值发现变化,那么会连带“县级”的列表框发生变化。

function selectOrg(){
         var selectNow = document.getElementById("city");       //得到当前<select id="city">的对象
         var url = ‘<%=path%>/rb-addressBillServices.do‘;         //发送请求的路径
         Ext.Ajax.request({                                                          //利用Ext的AJAX向后台发送请求
              url:url,
              method:‘post‘,
              params:{
                      method:‘getOrgName()‘,                                    //后台执行的方法名
                      responseType : ‘text‘
                },
             success: function(msg){ 
                      var orgarr = msg.responseText.split("|");         //因为后台传递过来的是形式为 1,张三 | 2,李四 | 3,王五
                      for(var i=0; i<orgarr.length; i++){
                               var org = orgarr[i].split(",");                     //得到数组  1,张三
                              addOption(selectNow,org[1],org[0]);       //调用addOption方法,进行赋值,下面
                      }
              },
             failure: function (){
                      Ext.Msg.alert(‘系统提示‘,‘保存失败!‘); 
              }
         });
       }

 

这个方法是一个通用的动态添加Option,得到select的id,从数据库中查询到实际值id和显示值name,分别存入到text和value中

  function addOption(objSelectNow, txt, val) {   
            var objOption = document.createElement("OPTION");       // 使用W3C标准语法为SELECT添加Option   
            objOption.text = txt;                                                          //得到显示值
            objOption.value = val;                                                       //得到实际值
            objSelectNow.options.add(objOption);                              //把每一个option添加到select中
 }

 

当页面加载的时候,我们已经能够把数据动态的存入到select下拉列表中了,那么,接下来,我们就要实现所谓的二级连动了:

在select 中添加对应的onchange事件,也就是当第一个“市级”下拉框中的值改变时,把第二个下拉框中的值进行改变:

 

 

添加函数:changeCity(this)

 

         function changeCity(obj){
                 var selectNow = document.getElementById("county");
                 var url = ‘<%=path%>/rb-addressBillServices.do‘;
                 if(obj.value == 0){
                         for(var k=selectNow.length-1; k>=0; k--){    
                                selectNow.options.removeChild(selectNow.options[k]);     //这里一定要进行倒序删除
                         }
                        selectNow.options.add(new Option("请选择县","0"));
                 }else{
                         Ext.Ajax.request({
                                 url:url,
                                 method:‘post‘,
                                 params:{
                                           responseType : ‘text‘,
                                           method:‘getOrgNameToCounty()&‘,
                                           opval:obj.value
                                  },
                                  success: function(msg){ 
                                           for(var k=selectNow.length-1; k>=0; k--){
                                                    selectNow.options.removeChild(selectNow.options[k]); 
                                             }
                                            var orgarr = msg.responseText.split("|");
                                            for(var i=0; i<orgarr.length; i++){
                                                    var org = orgarr[i].split(",");
                                                    addOption(selectNow,org[1],org[0]);
                                             }
                                   },
                                    failure: function (){
                                            Ext.Msg.alert(‘系统提示‘,‘保存失败!‘); 
                                   }
                             });
                    }
              }

   

   这里为什么要进行删除呢?你想啊,比如说:你在第一个下拉框中选中了“河北省”,那么,对应的在第二个下拉框中,就会出现在“河北省”中的各个市,现在问题就来了,假如你把第二个下拉框中的值不进行删除,那么,当你再选择“河南省”,那么恐怖的事情就发生了,刚才“河北省”中的各个市还存在第二个下拉框中,而点击了下拉框又会触发了onchange事件,那么第二个下拉框中就会存在“河北省”和“河南省”两个省份的市级信息,所以,我们要进行删除

 

   知道了为什么要进行删除,那么我们还为什么要进行倒序删除呢?再举个例子,假如,我们就是正序进行的删除,那么,相应的代码会是这样:

         for(var k=0;k<selectNow.length; k++){
                  selectNow.options.removeChild(selectNow.options[k]); 
         }
假设还是刚才的选择了“河北省”,那么其实在第二个市级下拉框中会存在一个类似的集合,里面包括河北省的11个市,当再选择“河南省”时,我们会删除原有的“河北省”的11个市的信息,那么运行for循环:

第一次:  k=0;   删除的元素   selectNow.options[0]   剩下的元素会发生变化吗?[1,2,3],删除了list.get(0),那么2会成为list.get(0)

第二次:  k=1;   删除的元素   selectNow.options[1]   删除了第二个元素,但第一个元素呢?没有进行删除

   list = [1,2,3,4]

第一次删除 :   移除元素1   剩下元素 [2,3,4]

第二次删除 :   移除元素3   剩下元素 [2,4]

元素2永远也不会再被删除掉,所以,我们要进行倒序删除

如何进行js动态生成option?如何实现二级连动?,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。