下拉框多级联动辅助js,优化您的下拉框
function IniteSelect(options) { $("body").IniteSelect(options) } (function ($) { $.fn.IniteSelect = function (options) { var option = $.extend({}, { ids: [], swType: [], callBack: [], guid: "", BaseUrl: "/ashx/DropDownControl.ashx", split: ";", obj: {}, isGetFirstDrop: true }, options); if (option.ids.length == 0) { return } else { if (option.isGetFirstDrop) { var c = null; if (option.callBack.length > 0) { c = option.callBack[0] } GetSelectData(option.ids[0], option.BaseUrl, $.extend(option.obj, { swType: option.swType[0], guid: option.guid }), c) } for (var i = 0; i < option.ids.length - 1; i++) { BindChange(i, option) } if (!option.isGetFirstDrop && option.ids.length > 1) { $("#" + option.ids[0]).change() } } }; function BindChange(i, option) { $("#" + option.ids[i]).change(function () { var value = $("#" + option.ids[i]).val(); for (var k = i + 1; k < option.ids.length; k++) { var ids = option.ids[k].split(option.split); for (var m = 0; m < ids.length; m++) { $("#" + ids[m] + " > option[value!='-1']").remove() } } var up = i + 1; if (value == "-1") { return } var c = null; if (option.callBack.length >= up) { c = option.callBack[up] } GetSelectData2(option.ids[up], option.BaseUrl, option.swType[up], value, option.split, c, option.obj) }) } function GetSelectData2(ids, url, swTypes, v, split, c, obj) { var teids = ids.split(split); var teswTypes = swTypes.split(split); for (var i = 0; i < teswTypes.length; i++) { if (teswTypes[i] != "") { GetSelectData(teids[i], url, $.extend(obj, { swType: teswTypes[i], guid: v }), c) } } } function GetSelectData(id, url, obj, c) { JQueryPost(url, obj, function (result) { result = eval("(" + result + ")"); var idobj = $("#" + id); $("#" + id + " > option[value!='-1']").remove(); for (var i = 0; i < result.length; i++) { idobj.append("<option value='" + result[i].Value + "'>" + result[i].Text + "</option>") } if (c != null) { window.setTimeout(function () { c() }, 100) } }) } })(jQuery);
使用方法:IniteSelect({ ids: ['agentId', 'orgId', 'schoolId','departid/classid'], swType: ['GetAllAgent', 'GetOrgDrop', 'GetSchoolDrop','GetSchoolDepart/GetSchoolClass'] });
做地址或者查询级联效果非常不错,可以指定传参和初始传参。也可以指定服务端url。
下拉框多级联动辅助js,优化您的下拉框的更多相关文章
- WebForm使用AngularJS实现下拉框多级联动
数据准备 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, CateId = , ...
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
- JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
- [ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板
/** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...
- C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
- jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
- 原生js实现一个自定义下拉单选选择框
浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...
随机推荐
- 修改hosts 流畅使用coursera
以管理员权限打开 C盘 -> Windows-> System32 -> drives -> etc -> hosts文件 在hosts文件最后写入 52.84.246 ...
- vue2.0+koa2+mongodb实现注册登录
前言 前段时间和公司一个由技术转产品的同事探讨他的职业道路,对我说了一句深以为然的话: "不要把自己禁锢在某一个领域,技术到产品的转变,首先就是思维上的转变.你一直做前端,数据的交互你只知道 ...
- 十个你需要在 PHP 7 中避免的坑
1. 不要使用 mysql_ 类函数 终于,你不用再看到建议不要使用 mysql_ 函数的提示了.因为 PHP 7 从核心上完全移除了它们,这意味着请你移步至更好的 mysqli_ 类函数,或者更灵活 ...
- 丢掉DDL,我用这招3分钟清空 MySQL 9亿记录数据表
摘要:最近由于福建开机广告生产环境的广告日志备份表主键(int类型)达到上限(21亿多),不能再写入数据,需要重新清空下该表并将主键重置,但由于表里有8亿多记录的数据量,使用重置命令及DDL命令执行地 ...
- PDF之pdfkit
说起pdf就想到了一款很适用的工具,那就是pdfkit,在前几天的项目中,有一个功能要实现,为了实现这一个功能,于是我大海茫茫中查询各种百科,不负众望的让我找到了我心怡的工具,想必也就是它了.好了废话 ...
- hdu1568 Fibonacci---前4位
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1568 题目大意: 求斐波那契数列第i项的前四位.i<1e8 思路: 由于数据范围大,不可能打表 ...
- 3分钟搞掂Set集合
前言 声明,本文用的是jdk1.8 前面章节回顾: Collection总览 List集合就这么简单[源码剖析] Map集合.散列表.红黑树介绍 HashMap就是这么简单[源码剖析] LinkedH ...
- java四种访问控制权限:public ,default,protected,private
四种访问权限的控制 范围 private default protected public 同一个类中 √ √ √ √ 相同包不同类 × √ √ √ 不同包的子类中 × × √ √ 不同包非子类 × ...
- [LeetCode] Base 7 基数七
Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "202&q ...
- 【Swift】swift定义全局变量
swift定义全局变量非常简单哈,只要在类class上面直接定义,就是全局变量了 当需要在类里面定义一个类函数访问的变量的时候,直接在var或者let 前面加一个 static