在博客园看到一篇不错的AJAX级联下拉列表,觉得不错,特地拿下来 :转载来自:『大雪无痕』 ,原文地址

  1 //当一个 下拉列表 改变时,触发所有联动;(警告:各下拉列表之间 请不要出现 循环依赖)
  2 //本函数,遵守如下规范:不使用任何内存数据(所有数据都是 即时使用,即时获取,数据实时),不初始化注册,
  3 //该规范可以在 HTML 出现任何意外时,保持最好的稳定
  4 function RefreshLinkage(ddlCtrl) {
  5     var curId = !ddlCtrl ? "" : ddlCtrl.id;
  6     //if (curId == undefined || curId.replace(" ","").length <= 0) return;      //不指定刷新控件,则刷新所有控件
  7     //var curValue = ddlCtrl.value;                                             //只要触发之后,让子控件自己寻找需要的值:不需要当前值
  8
  9     if (curId && ddlCtrl) {
 10         var hfValueCtrlId = $(ddlCtrl).attr("valueCtrlId");
 11         if (!hfValueCtrlId) hfValueCtrlId = "hf_" + curId;
 12         $("#" + hfValueCtrlId).val($(ddlCtrl).val());
 13     }
 14
 15     $("select").each(function (index, elem) {
 16         if (!curId || elem.id != curId) { //全部刷新 或者 不联动自己
 17             var parentId = $(elem).attr("parentId");
 18             if (parentId != undefined && ("" + parentId).replace(" ", "").length > 0) {
 19                 var parentIds = parentId.split(','); //分割父级Id
 20                 if (!curId || parentIds.indexOf(curId) >= 0) { //如果某个控件被当前控件联动
 21                     //操作 联动子控件
 22                     refreshOptions(elem);
 23                 }
 24             }
 25         }
 26     });
 27
 28     //刷新 指定的下拉列表
 29     function refreshOptions(elem) {
 30         if (!elem || !elem.id) return;
 31
 32         var parentId = $(elem).attr("parentId");
 33         var parentKey = $(elem).attr("parentKey");
 34         if (!parentId || !parentKey) return;
 35
 36         var parentIds = parentId.split(',');
 37         var parentKeys = parentKey.split(',');
 38
 39         if (parentKeys.length != parentIds.length)
 40             throw new Error("Linkage Select \"" + elem.id + "\": 'ParentKey' And 'ParentId' Length Is Not Same!");
 41
 42         var elemValueId = $(ddlCtrl).attr("valueCtrlId");
 43         if (!elemValueId) elemValueId = "hf_" + elem.id;
 44
 45
 46         //清空下拉列表
 47         if ($(elem).find("option").length > 0)
 48             $("#" + elemValueId).val('');
 49         $(elem).find("option").remove();
 50
 51         //创建默认行
 52         var withEmpty = $(elem).attr("withEmpty") != "false";
 53         var emptyValue = ($(elem).attr("emptyValue") || '');
 54         var emptyText = ($(elem).attr("emptyText") || ((GetSettingValue("IsEnglish", true)) ? "Please Select" : "请选择"));
 55         if (withEmpty) {
 56             $(elem).append("<option value='{V}'>{T}</option>".replace("{V}", emptyValue).replace("{T}", emptyText));
 57         }
 58
 59
 60         //需要的数据
 61         var parentIsEmpty = true;
 62         var jsonStr = "{ \"__Action\":\"RefreshSelect\", \"__SelectCtrl\":\"" + elem.id + "\", ";
 63         for (var j = 0; j < parentKeys.length; j++) {
 64             var parentValue = ($("#" + parentIds[j]).val() || '');
 65             jsonStr = jsonStr + "\"" + parentKeys[j] + "\":\"" + parentValue + "\"" + (j == parentKeys.length - 1 ? "" : ", ");
 66             if (parentValue && parentValue != emptyValue) parentIsEmpty = false;
 67         }
 68         jsonStr = jsonStr + "}";
 69
 70
 71         //如果所有父级都没有数据 则 不进行 Ajax
 72         if (parentIsEmpty) return;
 73
 74
 75         //Ajax提交
 76         var jsonData = JSON.parse(jsonStr);
 77         var postUrl = ($(elem).attr("postUrl") || (window.location.href));  //没有指定 Post地址,则 指向 自身页面
 78         postUrl = postUrl + (postUrl.indexOf("?") >= 0 ? ("&_rd=" + Math.random()) : ("?_rd=" + Math.random()));  //防止缓存
 79         $.post(postUrl, jsonData,
 80             function (data, status) {
 81                 //alert("Data: " + data + "\nStatus: " + status);
 82                 if (data != undefined && data.length > 0) {
 83                     //动态获取的行
 84                     var optionTemp = ($(elem).attr("optionTemp") || "<option value='{V}'>{T}</option>");
 85                     $.each(data, function (itemIndex, itemElem) {
 86                         var html = perfectExpres(optionTemp, itemElem);
 87                         $(elem).append(html);
 88                     });
 89
 90                     //用隐藏控件的值赋给 下拉列表控件
 91                     var $valueCtrl = $("#" + elemValueId);
 92                     if($valueCtrl.length>0)
 93                         $(elem).val($valueCtrl.val());
 94
 95                     //触发这个被改变的 下拉列表的改变事件
 96                     RefreshLinkage(elem);
 97                 }
 98             }, "json");
 99     }
100
101     //循环 object 中的所有属性,替换 expres 中,对应的部分;
102     function perfectExpres(expres, object) {
103         for (var key in object) {
104             expres = expres.replace("{" + key + "}", (object[key] || ''));
105         }
106         return expres;
107     }
108 }

转载于:https://www.cnblogs.com/xhhha/p/3334048.html

转:『代码』JS封装 Ajax级联下拉列表相关推荐

  1. js 封装ajax方法吗,原生JS封装ajax方法

    jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

  2. 原生JS封装Ajax插件(同域jsonp跨域)

    2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...

  3. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  4. 原生JS封装ajax以及request

    一.封装原生的xhr为ajax类 xhr以及用法见之前的文章 1.根据url确定请求的头部以及别的信息. var _headerConfig = {};if(url.indexOf('getcaptc ...

  5. 源生js封装ajax

    封装源生ajax代码: var data = {type: "get",url:"",data:null,async:true,success:null,err ...

  6. 原声ajax的函数式封装,原生 js 封装 ajax的两种方式(get,post)

    /*ajax封装 @param option:传入一个对象 属性分别为(顺序可以打乱): url:请求的路径 type:请求的不同类型get或post data:发送的数据,格式:key1=value ...

  7. 『JavaScript』JS简介

    本篇博客对JavaScript进行简单的介绍. JavaScript简介 JavaScript是一种直译式脚本语言,是一种动态弱类型的编程语言.它的解释器被称为JavaScript引擎,为浏览器的一部 ...

  8. 原生js封装二级城市下拉列表

    闲的蛋疼,封装了个二级城市下拉 先保证html里有 <select id="province" size=1 > </select> <select ...

  9. ajax总结(四):原生js封装a和jQurey版ajax介绍

    一.为什么要封装? 发现很多地方都要用ajax请求,但是大部分代码都是一样的,所以根据封装的思想,相同的代码封装成函数,在需要用的地方来调用,这样会很方便. 二.js封装ajax过程: 1.先了解结构 ...

  10. js 只刷新ajax,JS实现AJAX局部刷新(附代码)

    这次给大家带来JS实现AJAX局部刷新(附代码),JS实现AJAX局部刷新的注意事项有哪些,下面就是实战案例,一起来看一下. AJAX即"Asynchronous Javascript An ...

最新文章

  1. 【机器视觉案例】(5) AI视觉,手势调节物体尺寸,附python完整代码
  2. 视觉在无人驾驶中的应用及分类_机器视觉可以应用于水果自动分类拣选,你见过吗?...
  3. SugarCRM ListView查询中加入默认条件
  4. 替换空格---StringBuilder
  5. 数据挖掘原理与算法:练习题1
  6. gridview 中使用 if else_前端代码中如何优化if/else
  7. MySQL主从延时这么长,要怎么优化
  8. Python可视化中Matplotlib绘图(2.设置范围、标签、标题、图例(详细参数))
  9. 《Axure RP8 网站和APP原型制作 从入门到精通》一2.7 交付
  10. 循环、格式化输出、数据统计
  11. 引入媒体播放器media player 并调试它的选择模式 0130
  12. 拓端tecdat|R语言对巨灾风险下的再保险合同定价研究案例:广义线性模型和帕累托分布Pareto distributions分析
  13. 河里的水哪里去了——兼谈气候变暖与西方文明
  14. Maven详细安装教程
  15. espeak 开源离线语音合成工具
  16. 联想 ThinkBook 15 LLI 蓝屏恢复
  17. 为Go语言GC正名-20秒到100微妙的演变史
  18. 轻量级java框架 light-4j
  19. CDN加速全站配置教程
  20. Unity3D中手机陀螺仪的使用

热门文章

  1. 基于Android的减肥塑身平台
  2. 【Java】使用AOP进行异常处理与日志记录
  3. c#:判断一个数组元素中否有重复元素
  4. 面向对象设计的新视角
  5. esp8266 windows烧录问题
  6. 云杰恒指:9.4恒指期货实盘指导交易复盘
  7. php阿里支付回调逻辑,php 银联支付回调
  8. batchsize和数据量设置比例_设置BatchSize
  9. 课后自主练习(递归)1059. Fj haozi medium《编程思维与实践》个人学习笔记
  10. 游戏命中判定:圆桌算法和程序实现