下拉框多级联动辅助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一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...
随机推荐
- git出现错误原因解释
原因,在pull下拉代码或者push之前,你本地还有代码没有进行commit. 引起下面的错误. 建议commit后先pull再看看有没有冲突在进行push. git.exe push --pro ...
- hive:创建索引
hive也是支持索引的使用,但是如果表中已经有数据的情况下,创建索引的过程不是特别快. 已经拥有表: create table if not exists llcfpd_withgroupbykey( ...
- angulajs_删除功能
- C# Post提交数据
/// <summary> /// Post提交数据 /// </summary> /// <param name="postUrl">URL& ...
- SocketServer源码学习(一)
SocketServer其实是对socket更高级的封装正如官网上说的:The socketserver module simplifies the task of writing network s ...
- ES6 new syntax of Rest and Spread Operators
Rest and Spread Operators.md Why we need rest and spread operators? var showCollections = function(i ...
- Python学习【第26篇】:Python系列- 多线程(threading)
线程的调用方式:threanding模块 import threading import time def sayhi(num): #定义每个线程要运行的函数 print("running ...
- 空间搜索(圆范围)中Geohash编码方案和网格编码方案对比探讨
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 多个项目中实现范围(圆)搜索的方案为:依赖库表中的X和Y字段构 ...
- vim 多行缩进
按v进入可视化模式后, 选中要缩进的多行, 后按shift+.实现多行缩进.
- css清除浮动方法小结
清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错) 方法小结:1. 1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素 ...