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,优化您的下拉框的更多相关文章

  1. WebForm使用AngularJS实现下拉框多级联动

    数据准备 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,                                             CateId = ,        ...

  2. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  3. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  4. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  5. JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  6. [ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板

    /** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...

  7. C# MVC LayUI实现下拉框二级联动

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...

  8. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  9. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

随机推荐

  1. redis数据库各种数据类型的增删改查命令

    redis的常用数据操作: redis是key-value的数据结构,每条数据都是一个键值对. 键的类型是字符串并且键不能重复. redis最基本数据类型是string 所以下面的操作可以省略引号&q ...

  2. 32位centos6.5 mysql rpm包下载

    查看centos版本号和位数: http://www.cnblogs.com/grey-wolf/p/7472507.html mysql下载: 1.进入https://dev.mysql.com/d ...

  3. Java Class文件格式详解

    magic[4字节] 魔数,用来判断是否可以被虚拟机使用.固定值为0xCAFEBABE(咖啡宝贝)minor_version[2字节] 次版本号major_version[2字节] 主版本号,低版本的 ...

  4. 使用Git进行代码版本管理及协同工作

    Git简介: git是一种较为先进的代码版本管理及协同工作平台,采用分布式文件块存储: 1.  分布式: 代码保存在所有协同成员的计算机上,网速较差时依然可用:而传统的集中式代码版本管理系统则较难脱离 ...

  5. hadoop fs:du统计hdfs文件(目录下文件)大小的用法

    hadoop fs 更多用法,请参考官网:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html 以下是我的使用统计文件时使用的记录: [t@d ...

  6. flask 操作mysql的两种方式-sql操作

    flask 操作mysql的两种方式-sql操作 一.用常规的sql语句操作 # coding=utf-8 # model.py import MySQLdb def get_conn(): conn ...

  7. hdu3342-判断有向图中是否存在(至少)3元环或回路-拓扑排序

    一:题目大意:   给你一个关系图,判断是否合法,    每个人都有师父和徒弟,可以有很多个:  不合法:  1) . 互为师徒:(有回路)  2) .你的师父是你徒弟的徒弟,或者说你的徒弟是你师父的 ...

  8. 点击后退按钮回到本页面中的另一个标签页(tab)

    在使用zepto进行微信网页开发的时候,遇到一个情况,在本页面存在四个TAB栏,每点击一个栏会显示相应的内容,下图这种: 现在有一个需求是,用户点击了后退按钮,需要回到上一次点击的tab栏. 这个需求 ...

  9. Java集合框架知多少——干货!!!

    Java集合框架的组成 注意:四个接口的区别 ① Collection:存储无序的.不唯一的数据: ② List:存储有序的.不唯一的数据: ③ Set:存储无序的.唯一的数据: ④ Map:以键值对 ...

  10. 部署testlink报错,安装wampserver时提示丢失MSVCR110.dll

    安装wampserver时提示丢失MSVCR110.dll(在windows server上可用)对于32位系统,安装Wampserver 后启动的时候提示系统错误:MSVCR110.dll丢失.于是 ...