自己编写jQuery插件 之 无限级联下拉框

 

因为是级联,所以数据必须是树型结构的,我这里的测试数据如下:

看下效果图:

1.>图一:

2.>图二:

3.>图三:

  由图可知,下拉框的个数并不是写死的,而是动态加载的。每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一个下拉框,没有则不添加。

插件的实现代码如下:

(function ($) {
$.fn.CascadingSelect = function (options) { //默认参数设置
var settings = {
url: "/Handler.ashx", //请求路径
data: "0", //初始值(字符串格式)
split: ",", //分割符
cssName: "select", //样式名称
val: "id", //<option value="id">name</option>
text: "name", //<option value="id">name</option>
hiddenName: "selVal" //隐藏域的name属性的值
} //合并参数
if (options)
$.extend(settings, options); //链式原则
return this.each(function () { init($(this), settings.data); /*
初始化
@param container 容器对象
@param data 初始值
*/
function init(container, data) { //创建隐藏域对象,并赋初始值
var _input = $("<input type='hidden' name='" + settings.hiddenName + "' />").appendTo(container).val(settings.data); var arr = data.split(settings.split);
for (var i = 0; i < arr.length; i++) {
//创建下拉框
createSelect(container, arr[i], arr[i + 1] || -1);
}
} /*
创建下拉框
@param container 容器对象
@param parentid 父ID号
@param id 自身ID号
*/
function createSelect(container, parentid, id) { //创建select对象,并将select对象放入container内
var _select = $("<select></select>").appendTo(container).addClass(settings.cssName); //如果parentid为空,则_parentid值为0
var _parentid = parentid || 0; //发送AJAX请求,返回的data必须为json格式
$.getJSON(settings.url, { parentid: _parentid }, function (data) { //添加子节点<option>
addOptions(container, _select, data).val(id || -1) });
} /*
为下拉框添加<option>子节点
@param container 容器对象
@param select 下拉框对象
@param data 子节点数据(要求数据为json格式)
*/
function addOptions(container, select, data) { select.append($('<option value="-1">=请选择=</option>')); for (var i = 0; i < data.length; i++) {
select.append($('<option value="' + data[i][settings.val] + '">' + data[i][settings.text] + '</option>'));
} //为select绑定change事件
select.bind("change", function () { _onchange(container, $(this), $(this).val()) }); return select;
} /*
select的change事件函数
@param container 容器对象
@param select 下拉框对象
@param id 当前下拉框的值
*/
function _onchange(container, select, id) { var nextAll = select.nextAll("select"); //如果当前select对象的值是空或-1(即:==请选择==),则将其后面的select对象全部移除
if (!id || id == "-1") {
nextAll.remove();
} $.getJSON(settings.url, { parentid: id }, function (data) {
if (data.length > 0) {
var _html = $("<select class='" + settings.cssName + "'></select>");
var _select = addOptions(container, _html, data); //判断当前select对象后面是否跟有select对象
if (nextAll.length < 1) { select.after(_select); //没有则直接添加 } else { nextAll.remove(); //有则先移除再添加
select.after(_select);
}
}
else {
nextAll.remove(); //没有子项则后面的select全部移除
}
            saveVal(container); //进行数据保存,此方法必须放在回调函数里面
});

         //saveVal(container); //如果放在这里,则会出现bug
} /*
将选择的值保存在隐藏域中,用于表单提交保存
@param container 容器对象
*/
function saveVal(container) { var arr = new Array();
arr.push(0); //为数组arr添加元素0,父节点从0开始,所以添加0 $("select", container).each(function () {
if ($(this).val() > 0) {
arr.push($(this).val()); //获取container下每个select对象的值,并添加到数组arr
}
}); //为隐藏域对象赋值
$("input[name='" + settings.hiddenName + "']", container).val(arr.join(settings.split));
} });
}
})(jQuery);

注释我已经尽量写的详细了,但还是要对一些东西做下讲解。

1.> 我这里后台语言用的是C#,因此你看到的请求路径是这样的(url:"/Handler.ashx"),你用其它语言是没有问题的,但是通过ajax请求返回的数据必须是json格式的数据。

  

2.>在初始化方法 init() 中,我们向容器中放入了一个隐藏域,这个隐藏域是用来存值的,我们通过一个 saveVal() 方法为其赋值。之所以要加隐藏域,是因为我们选择的数据最终  是要保存到数据库中的,这样就会有表单提交操作,因此加个隐藏域。

  

3.>默认参数设置(settings)里面的split分割符。这里用的是逗号(,) 你也可以改用其它的,比如(-)或者(|)。它主要是用来拆分和组合所有下拉框的值的。

  拆分主要是在初始化(init)的时候,比如你给的初始值(data)不是0,而是 0,1,4  这时就会将其拆分,逐一执行创建下拉框方法 createSelect()

  组合主要是在给隐藏域赋值的时候,用分割符将各个下拉框的值拼接成一个字符串,然后赋给隐藏域。

4.>默认参数设置(settings)里面的 {val: "id", text: "name" }  。它们对应的是你返回的json对象中对应的属性名。

5.>在_onchange()方法里面有写到saveVal()执行位置的问题。之所以写在回调函数外面会出现bug,是因为$.getJSON()默认是异步的,在回调方法还没执行完时,就执行了   saveVal()方法。我们来看来bug所在:

  

  

  此时隐藏域的值是错误的,正确的值应该是 0,1,5 。由于回调函数还没执行完,也就是nextAll.remove()这个还没执行的时候,就是执行了saveVal()

DEMO的Html部分的代码:

<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#box{ width:500px; margin:100px auto;}
.select{ width:120px; height:30px; margin-right:5px;}
</style>
</head>
<body>
<!--容器-->
<div id="box"></div>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.similar.cascadingselect.js" type="text/javascript"></script>
<script type="text/javascript">
$("#box").CascadingSelect({data:"0,1,4"}); //设置初始值为0,1,4
</script>
</body>
</html>

运行结果:

后台代码这里就不给了,毕竟又不是每个人都用的C#....

随笔分类 - jQuery

 
摘要: 因为是级联,所以数据必须是树型结构的,我这里的测试数据如下:看下效果图:1.>图一:2.>图二:3.>图三: 由图可知,下拉框的个数并不是写死的,而是动态加载的。每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一...阅读全文
posted @ 2014-10-11 15:34 similar 阅读(940) | 评论 (9) 编辑
 
摘要: 之所以写这个插件是因为前段时间在一个站点上看到了这个应用,当时觉得挺好玩的,就想自己实现一个,在网上查了资料后,借鉴别人的代码,实现如下。看下效果图吧: 1.>小图 2.>大图(实际尺寸比下面这张图要大,下面这张图是我截的小尺寸图) 3.>放大镜效果 第三张图就是放大...阅读全文
posted @ 2014-10-10 00:25 similar 阅读(839) | 评论 (2) 编辑
 
摘要: 又来吐嘈了,实在是忍不住:换工作以来的第一次上班迟到。早上坐车,坐了4站路发现路线不对,问司机,司机说从今天起换路线了。尼玛,立马下车换乘。换了车,开了2站路,车子坏了,再次被迫下车。就近站牌等车,第一次车没靠站,直接走了,第二次很挤,没法还得上。终于到了公司楼下,fuck,电梯坏了,最终我迟到了....阅读全文
posted @ 2014-09-12 00:15 similar 阅读(1830) | 评论 (8) 编辑
 
摘要: 啥也不说,先上图,有图有真相 :)现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了。因此这个插件就这样产生了...来看插件的实现代码吧:(function () { $.MsgBox = { Alert: function (title, msg) { ...阅读全文
posted @ 2014-08-30 00:37 similar 阅读(1515) | 评论 (18) 编辑
 
摘要: 菜单折叠这个功能很简单,很多人都有写过,只因它在项目中使用实在是太频繁了。代码就那么几行,没什么讲的,这里只是将其封装成插件而已。 Html代码如下: 菜单一 1111 1111 1111 ...阅读全文
posted @ 2014-08-06 23:29 similar 阅读(1180) | 评论 (6) 编辑
 
摘要: 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思。不想这样,不想这样,快让这种情绪消失吧,忽忽....表单验证在项目中用的还是比较多的,公司当前正在做的项目就要用到,故此写了此插件,先给大家看下在项目中应用的效果图吧:直接上插件实现代码了,围绕代码进行讲解比较容易点:...阅读全文
posted @ 2014-08-04 23:41 similar 阅读(1104) | 评论 (7) 编辑
 
摘要: 昨天 - 扒衣见君节,今天 - 牛郎织女节。光棍只能来撸代码了,哎!首先来看下html骨架,如下: 111 222 333 结构简单明了,没什么说的。讲下实现原理: div box是最外层盒子,给它指定...阅读全文
posted @ 2014-08-02 02:14 similar 阅读(971) | 评论 (1) 编辑
 
摘要: jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个。起初我Html代码架子是这样的: 标签1 标签2 标签3 内容11111...阅读全文
posted @ 2014-07-30 21:09 similar 阅读(815) | 评论 (5) 编辑
分类: jQuery

jQuery无限级联下拉框插件的更多相关文章

  1. Combo Select – jQuery可搜索下拉框插件

    今天用到另一款jq插件..插件就是无脑,,引入相关文件,开始撸吧 引入相关文件: <link href="~/Scripts/combo-select/combo.select.css ...

  2. Jquery封装:下拉框插件

    代码如下: ;(function ($, window) { $.fn.addSelect = function (options) { //合并传入与默认的参数 var opts = $.exten ...

  3. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

  4. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  5. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  6. JQuery和ASP.NET分别实现级联下拉框效果

    在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...

  7. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  8. jquery 下拉框插件,实现智能补全,模糊搜索,多选

    近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...

  9. 自动补齐flexselect+级联下拉框案例

    在开发web应用时,经常遇到类似省市区级联下拉框操作,即选中省份自动级联加载该省份所有的市,选中市自动级联加载该市所有的区:假设省市区的数据量很大,此时用户想选中某市,因而要从上往下查找,可能半天都找 ...

随机推荐

  1. python基础课程_学习笔记13:标准库:有些收藏夹——sys

    标准库:有些收藏夹 sys sys这个模块可以让你访问和python解释器联系紧密的变量和函数. sys模块中一些重要的函数和变量 函数/变量 描写叙述 argv 命令行參数,包含脚本名称 exit( ...

  2. C#值传递和按引用传递

    知识点: 值类型和引用类型  为值类型,,据        对于引用类型来说,栈中存储的是堆中对象的地址 值传递和引用传递 对于值传递,传递的是栈中保存的数据        对于引用传递.传递的是栈本 ...

  3. matlab简单实现SVD的推荐

    %svd chengxu A = [5 5 0 5;5 0 3 4; 3 4 0 3; 0 0 5 3; 5 4 4 5; 5 4 5 5]; A = A'; [U S V] = svd(A); U ...

  4. Maven: NoClassDefFoundError: org/codehaus/plexus/classworlds/launcher/Launcher

    为了和团队开发环境保持一致,须要 在Ubuntu上安装maven2.2.1,引文我之前已经用apt-get命令安装了3.3的maven.在运行maven命令时报错: Maven: NoClassDef ...

  5. linux(fedora) 下dvwa 建筑环境

    linux(fedora)下dvwa组态 1.下载httpd,dvwa,mysql,mysqlserver, php-mysql,php 除了dvwa 这是外界进入下一官方网站.该服务通过休息inst ...

  6. js之面向对象----封装篇

    学习了一天的面向对象总结一下,共分为三类 - -! 老规矩 第一部分是概念性知识!!! 面向对象编程,我们可以把他想象成我们在造人.一个对象便是一个人,这个人有胳膊有腿,这便是一个对象的属性或者方法. ...

  7. RabbitHub开源

    RabbitHub开源情况及计划   之前写过一篇”.NET 平台下的插件化开发内核(Rabbit Kernel)”,已经过去三个月了,期间RabbitHub并不是没有了发展更不是放弃了发展,在Rab ...

  8. 从头开始学JavaScript (十)——垃圾收集

    原文:从头开始学JavaScript (十)--垃圾收集 一.垃圾收集 1.1javascript垃圾收集机制: 自动垃圾收集,执行环境会负责管理代码执行过程中的使用的内存.而在C和C++之类的语言中 ...

  9. 从头学起android&lt;GridView网格视图.二十八.&gt;

    GridView基于组件的网络格所有的形式的组分的,例如:当制作专辑,所有的图片将在相同的尺寸在不同的显示格在孩子,是否能够依靠这个组件完成.此组件的继承结构参见例如下面: java.lang.Obj ...

  10. 【译】使用requestIdleCallback

    原文地址:http://galen-yip.com/2015/10/07/%E3%80%90%E8%AF%91%E3%80%91%E4%BD%BF%E7%94%A8requestIdleCallbac ...