下拉框多级联动辅助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一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...
随机推荐
- python入门(9)字符串和编码
python入门(9)字符串和编码 字符串是一种数据类型,比较特殊的是字符串有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理. 最早的计算机在设计时采用8个比 ...
- spring mvc跨域(post)--filter方案
import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.Http ...
- DIY一个超简单的画图程序
编译环境:VS2017+Easy_X 最近笔者一直在翻阅Easy_X的帮助手册,学习到了一些关于获取鼠标状态消息函数的知识,感觉收获颇大,于是想试验一番,将所学知识运用出来.先补充一下在Easy_X中 ...
- OpenGL中glUniform1i使用
在OpenGL中使用glGetUniformLocation和glUniformxxx等函数时,要在之前启用对应的着色器程序,即调用glUseProgram.
- WPF 自定义TabControl控件样式
一.前言 程序中经常会用到TabControl控件,默认的控件样式很普通.而且样式或功能不一定符合我们的要求.比如:我们需要TabControl的标题能够居中.或平均分布:或者我们希望TabContr ...
- [LeetCode] Prime Number of Set Bits in Binary Representation 二进制表示中的非零位个数为质数
Given two integers L and R, find the count of numbers in the range [L, R] (inclusive) having a prime ...
- python字符串-内置方法列举
所谓内置方法,就是凡是字符串都能用的方法,这个方法在创建字符串的类中,下面是总结: 首先,我们要学习一个获取帮助的内置函数 help(对象) ,对象可以是一个我们创建出来的,也可以是创建对象的那个类, ...
- Event 发布与订阅(一)
前言 主要讲的是发布与订阅在Event中的一个简单实现用来加深理解. C #中的事件(Event)的理解: 事件具有以下属性:(From Events) 发行者确定何时引发事件:订户确定对事件作出何种 ...
- 51 nod 1610 路径计数(Moblus+dp)
1610 路径计数 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 路径上所有边权的最大公约数定义为一条路径的值. 给定一个有向无环图.T次修改操作,每次修改一 ...
- 2015 多校联赛 ——HDU5350(huffman)
Problem Description MZL is a mysterious mathematician, and he proposed a mysterious function at his ...