`
vakin.jiang
  • 浏览: 147542 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

一个非常简洁基于jquery原创无限级联ajax异步请求下拉框插件

阅读更多

一个基于jquery下拉框插件:

  1. 支持无限级联

  2. 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
				});

 同步发布:http://my.oschina.net/vakinge/blog/221480

0
0
分享到:
评论

相关推荐

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    jQuery城市级联插件

    城市级联插件基于jQuery的核心功能,利用DOM操作、事件监听和Ajax异步请求等技术实现。当用户选择一个国家或省份时,插件会动态加载并显示相应的城市列表。这一过程的关键在于数据的获取和渲染,通常通过JSON格式的...

    Jquery Ajax 动态级联

    在网页开发中,jQuery AJAX 是一个非常重要的技术,它使得前端与后端的数据交互变得更加便捷。本主题将深入探讨如何利用jQuery AJAX实现动态级联效果,即二级联动下拉菜单,这种功能通常用于多级分类选择或者地区...

    AJAX级联下拉框源码

    AJAX级联下拉框是一种常见的前端交互设计,它利用Ajax技术实现在用户选择一个下拉选项时,动态地更新另一个相关联的下拉框内容。这种功能在数据关联、筛选和表单填写中非常常见,例如省份和城市的选择,类别和子类别...

    级联下拉框效果 jquery

    在实际应用中,级联下拉框的数据可能来自服务器,这时我们需要使用Ajax异步请求获取数据。例如,可以使用jQuery的`$.ajax`或`$.get`方法: ```javascript $.ajax({ url: 'your-api-url', type: 'GET', data: { ...

    jQuery带搜索功能的下拉框,可以动态添加数据,实现级联效果

    jQuery带搜索功能的下拉框,可以动态添加数据,实现级联效果。效果图参看博客:https://blog.csdn.net/BigBoySunshine/article/details/88293931

    jQuery实现级联下拉框实战(5)

    在本文中,我们将探讨如何使用jQuery实现级联下拉框的效果,这是一个常见的前端交互功能,常用于数据筛选和表单填写。级联下拉框允许用户在一个下拉框中做出选择后,根据所选内容动态更新下一个下拉框的选项。这种...

    一个用jquery写的级联完整例子

    总之,这个例子提供了一个完整的jQuery级联下拉框的实现,结合了前端的动态更新和后端的数据库交互,对于初学者和开发者来说都是一个很好的学习和参考素材。理解并实践这个例子,有助于提升你在实际项目中处理类似...

    级联 ajax实现方式

    在级联Ajax实现中,我们通常利用Ajax的异步特性,当用户在一个下拉框中做出选择时,通过Ajax请求获取并填充下一个下拉框的数据。 接着,我们来看如何在PHP中构建后端逻辑。PHP作为服务器端的脚本语言,负责处理Ajax...

    JQuery异步加载无限下拉框级联功能实现示例

    总结起来,JQuery实现异步加载无限下拉框级联功能的关键在于使用AJAX请求获取数据,动态创建和操作DOM元素,以及正确地绑定和处理事件。这种功能在网页应用中非常常见,能够提升用户体验,使数据选择更加流畅和直观...

    无限极级联下拉框的封装

    在网页开发中,级联下拉框(Cascading Dropdown)是一种常见的交互设计,它用于在两个或更多下拉框之间建立关联,当用户在一个下拉框中选择一个选项时,其他下拉框的选项会根据所选内容动态更新。在本案例中,我们将...

    jQuery多级联动下拉框插件

    这种插件可以帮助用户在多个下拉框之间建立关联,当用户在一级下拉框中选择一个选项时,二级下拉框会自动更新其选项,以此类推,直到达到预设的级联层级。这种功能在处理分类数据或有层次关系的数据时特别有用,如...

    Ajax 无限级 联动下拉框

    这种效果可以通过Ajax实现,每级下拉框的选项改变时,都触发一个Ajax请求,获取并填充下一级别的选项。 三、实现步骤 1. 创建HTML结构:首先,我们需要创建包含多个select元素的HTML结构,每个select代表一个级别。...

    JQuery + Servlet +Json实现下拉框级联

    在实现下拉框级联时,JQuery负责监听用户在第一个下拉框中的选择,然后通过Ajax异步请求向Servlet发送数据,获取相应的级联数据,并更新第二个下拉框的选项。 以下是实现步骤: 1. **创建Servlet**:在Servlet中,...

    Jquery实现ajax二级级联查询

    本主题聚焦于“Jquery实现ajax二级级联查询”,这是一个常见的前端交互设计,常见于下拉菜单联动,例如省份选择后自动更新城市选择。在这个场景中,我们通常会利用服务器端(如JSP或Servlet)动态生成XML文件,因为...

    jQuery无限层级下拉框

    【jQuery无限层级下拉框】是一种交互式的网页元素,它允许用户从一系列级联的下拉菜单中选择值,这些菜单可以...通过这些方法,可以构建出一个动态的、能够级联的无限层级下拉框系统,有效地呈现和管理层次结构数据。

    jquery 省市联动下拉框

    标题中的“jquery 省市联动下拉框”是指在网页设计中,使用jQuery库实现的一个功能,允许用户从一个下拉框选择省份后,另一个下拉框会自动更新为对应省份的城市列表。这种功能常见于需要用户输入详细地址的表单中,...

    ajax+servlet两级动态级联下拉框

    本项目“ajax + servlet 两级动态级联下拉框”旨在演示如何使用AJAX(异步JavaScript和XML)技术和Servlet进行交互,以实现在选择第一个下拉框的值后,第二个下拉框自动更新并显示相关数据。以下是对这个项目的详细...

Global site tag (gtag.js) - Google Analytics