一个基于jquery下拉框插件:
-
支持无限级联
-
ajax异步请求
本不想重复造轮子,但是网上找的类似插件代码都比较复杂代码量比较多,所以干脆就个人写一个,直接贴代码
/** * 无限级联异步加载下拉框插件 * author:vakinge * */ ;(function($) { // 异步加载下拉框 $.fn.asnycSelect = function(options) { return this.each(function(){ new asnycSelect().builder($(this),options); }); }; function asnycSelect(){ this.settings = { linkage:false,//是否联动菜单 actionUrl:null,//请求地址 valtarget:null,//值输出元素(选择的值最终保存在) params:'',//初始查询参数:多个用“-”隔开 level: 1, maxlevel:null,//最大级 默认:2 }; this.builder = function($target,options){ options = $.extend(this.settings,options); var $subSelect,settings = this.settings; $target.attr("level",settings.level).empty(); $.getJSON(settings.actionUrl + settings.params, function(data){ if(!data || !data.opts)return; $target.append("<option value=''>请选择</option>"); data = data.opts; for(var i in data){ $target.append("<option value='"+i+"'>"+data[i]+"</option>"); } var linkNext = settings.linkage && settings.maxlevel > settings.level; if(linkNext){ $subSelect = $target.clone().empty().insertAfter($target); } $target.on('change',function(){ $(settings.valtarget).val($(this).val()); if(!linkNext)return; options.level = parseInt($(this).attr("level")) + 1; options.params = $(this).val(); $subSelect.asnycSelect(options); }); }); }; }; })(jQuery);
使用例子:
$('.J_area_select').asnycSelect({ linkage:true, actionUrl:'http://www.smhaochi.com/', valtarget:'#selecdArea', params:'0', maxlevel:2 }); $('.J_type_select').asnycSelect({ linkage:true, actionUrl:'http://www.unetzone.com/', valtarget:'#selecdType', params:'0', maxlevel:2 });
相关推荐
网页应用中,多个select之间级联刷新是很常见的一个需求,本插件充份运用jquery强大的脚本功能,并运用json实现数据交互,实现了select无限级联的功能,接口调用简洁,刷新功能配置灵活,参数强大, 支持select元素...
AJAX级联下拉框源码 AJAX级联下拉框源码 AJAX级联下拉框源码
AJAX-DWR下拉框级联AJAX-DWR下拉框级联 真正实用的`仅供参考
jQuery带搜索功能的下拉框,可以动态添加数据,实现级联效果。效果图参看博客:https://blog.csdn.net/BigBoySunshine/article/details/88293931
jQuery城市级联插件 jQuery城市级联插件 jQuery城市级联插件
用jquery实现级联下拉框效果 源代码+讲解
使用jquery写的级联下拉框,使用jquery写的级联下拉框
JQuery实战第五讲:级联下拉框效果,如果用在《MVC中更加合适
这是一个利用了Ajax技术的一个Jquery实例,动态的生成级联的下拉列表框,在中关村zol中经常可以看到。如果遇到无法显示的情况,请自己阅读代码。
使用JQuery实现漂亮的三级级联下拉框,
通过Jquery Ajax操作数据库实现二级级联....
jquery-casecader一个jquery级联下拉组件
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
网上找了很久这种菜单,浪费了很多时间,实在没办法,只好老老实实去官网上按说明弄了一个,并更新了,jquery1.5.2, 希望给有需要的朋友可以节约一点时间,欢迎交流,qq:170262
主要介绍了JQuery异步加载无限下拉框级联功能的实现,需要的朋友可以参考下
级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框
Ajax(jQuery)全国城市三级级联菜单插件,简单易用
依赖于jquery 和 dwr,实现无限级联显示。另外先要申明的一点,数据库设计时,就地区来举例, 假如全国为00 四川为 00|28 成都为 00|28|028 ,总之,后一级包含前一级,加上竖线,再加code. 这种结构便于查找。 ...