何为二级连动?

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

看下面的例子:

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

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?如何实现二级连动?的更多相关文章

  1. js动态生成下拉列表

    经常需要用到js动态生成下拉列表的功能,记录下来备用. 示例需求:通过ajax请求,从后台获取用户姓名列表,并添加到下拉列表中.js代码如下: function getNameList(){ //如果 ...

  2. JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  3. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  4. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  5. 2)JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  6. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  7. js 动态生成html 触发事件传参字符转义

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 “单.双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决.下面就来 ...

  8. IE8下动态生成option无法设置文本内容

    问题: 1.在IE8下,JS动态添加 option 的时候,value 有值,但是文本内容添加不上 例:<option value="北京"></option&g ...

  9. 爬虫案例(js动态生成数据)

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

随机推荐

  1. Android百度地图开发(五)公交线路详情搜索、多条线路显示

    一.公交线路详情检索 获取公交线路的详情主要分来两步,1.获取公交线路的Uid,2.通过Uid获取公交线路详情. 1.获取公交线路的Uid: /* * 获得公交线路图的Uid,并且根据系Uid发起公交 ...

  2. GRIDVIEW传值的两种方法

    第一种方法:在onselectedindexchanged中写事件 第二种方法:OnRowCommand事件 前端页面: <%@ Page Language="C#" Aut ...

  3. c#中格式化导出Excel数据

    在项目开发过程中经常会遇到数据导出Excel.如果只是导出数据就好办了.但往往用户会有各种格式要求.加粗.边框.合并单元格.汇总等功能. 以下的方法是基于Excel模版方式写入数据导出的功能.可以最大 ...

  4. 一道关于java 类初始化 成员初始化的笔试题的解析

    代码如下: java笔试题public class Mapplication { private static int n; private static Mapplication m1 = new ...

  5. Application_Error

    //出现未捕捉的异常时,系统调用本方法,一般用于记录日志.错误页的重定向一般在web.config中设置.        protected void Application_Error(object ...

  6. 第二百一十五、六天 how can I 坚持

    昨天刷机刷到很晚,博客都忘写了,刷了个flyme,用着没什么感觉,今天打电话试了下还有破音,有点小后悔.不行过两天再刷回来. 今天.mysql ifnull函数. 两条熊猫鱼都死了,这两天雾霾那么严重 ...

  7. What's Exposure?

    [What's Exposure?] ISO:即相机的感光度.ISO数值的大小是DC对光线反应的敏感程度测量值,通常以ISO数值表示,数值越大表示对光线的敏感性越强,数值越小表示越弱,是控制曝光量的一 ...

  8. RedHat/CentOS6.4---永久关闭iptables

    今天无意中发现一个现象,当我关闭iptables并且停止iptables服务,但是总会有一些出奇的事情发生,当我再次启动系统,查看iptables状态,iptables又自动开启,很是无奈啊!在Red ...

  9. qq邮箱发送

    454 Authentication failed, please open smtp flag first!用QQ邮箱测试报错 我用QQ邮箱测试javamail发送邮件的功能,用户名密码设置正确,却 ...

  10. flask中的session对象方法

    'clear', 'copy', 'fromkeys', 'get', 'has_key', 'items', 'iteritems', 'iterkeys', 'itervalues', 'keys ...