`

jQuery实现的可重用的联动菜单

 
阅读更多
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<div id="selectDiv_1"></div>
<div id="selectDiv_2"></div>
</body>

<script type="text/javascript">
$(document).ready(function(){
	var url = ["productSiteSortAction!queryProductTag.action","productSiteSortAction!queryProductSubtag.action"];
	var data = ["productKindDTO.id","productTagDTO.id"];
	var title = ["大类","小类","细类"];
	$.cascadeSelect.initSelect("selectDiv_1",url,data,title,4);
	$.cascadeSelect.initSelect("selectDiv_2",url,data,title,4);
});


(function($){
	var current_select_id = -1;
	var current_container_id = -1;
	$.cascadeSelect={
		//初始化联动菜单
		initSelect: function(id,url,data,title,num){
			if(id == undefined ||id == "" || url == null || url.length == 0 || data == null || data.length == 0 || num <= 1){
				alert("参数传递错误!");
				return;
			}
			/*
			if(url.length != data.length || data.length != title.length || url.length != title.length){
				alert("数组参数传递错误!");
				return;
			}
			*/
			
			var contianer = $("#"+id);
			current_container_id = id;
			if(contianer == null || contianer == undefined || typeof(contianer) == undefined){
				alert("容器定义错误!");
				return;
			}
			current_container_id = id.substr(10);
			//创建select
			for(var i = 0; i < num; i++){
				var str_onchange = "$.cascadeSelect.ajaxQuerySelect(\""+url[i]+"\",\""+data[i]+"\",this);";
				var str_select = title[i]+"<select id='select"+current_container_id+"_"+i+"' name='select_"+i+"' onchange='"+str_onchange+"'><option value=''>-- 选择 --</option></select>";
				contianer.append(str_select);
			}
			$("#"+id).append("<select style='display:none' id='select"+current_container_id+"_-1'><option value=''></option></select>");
			var obj =$("#select"+current_container_id+"_-1");
			$.cascadeSelect.ajaxQuerySelect(url[0],data[0],obj[0]);
		},
		//发送ajax请求
		ajaxQuerySelect: function(url,data,obj){
			var _data = data+"="+obj.value;
			current_select_id = parseInt(obj.id.substr(8));
			current_container_id = $(obj).parent().attr("id").substr(10);
			//alert(obj.id+","+current_container_id);
			$.cascadeSelect.clearAfterCurrentSelect();
			if(current_select_id != -1 && obj.value == ""){
				return;
			}
			$.ajax({
				type:"post",
				async:false,
				url:url,
				data:_data,
				datatype:"json",
				success:$.cascadeSelect.callback_success,
				error:$.cascadeSelect.callback_error
			});
		},
		//回调函数处理返回的数据
		callback_success:function(data){
			var data = eval('(' + data + ')');
			
			var _current_select_id = current_select_id + 1;
			var select_i = $("#selectDiv_"+current_container_id+" > #select"+current_container_id+"_"+_current_select_id);
			select_i.empty();
			var str = "<option value=''>-- 选择 --</option>";
			for(var i = 0; i < data.length; i++){
				str+="<option value='"+data[i].id+"'>"+data[i].tagName + "</option>";
			}
			select_i.append(str);
		},
		//回调函数处理返回的数据
		callback_error:function (XMLHttpRequest, textStatus, errorThrown){
			alert(textStatus);
		},
		//把当前选择的之后所有菜单重置
		clearAfterCurrentSelect:function(){
			var selects = $("#selectDiv_"+current_container_id+" > select[id^='select"+current_container_id+"_']");
			selects.each(function(){
				var _e_id = parseInt($(this).attr("id").substr(8));
				if(_e_id > current_select_id){
					$(this).empty();
					$(this).append("<option value=''>-- 选择 --</option>");
				}
			});
		}
	}
})(jQuery)
</script>
</html>
分享到:
评论

相关推荐

    jquery实现多级联动菜单

    接下来,我们需要引入jQuery库,并编写JavaScript代码来实现联动效果。jQuery提供了丰富的DOM操作方法,使得我们可以轻松地监听事件、修改元素属性。下面是一个简单的示例,展示了如何在点击一级菜单时显示或隐藏...

    jquery select二级联动菜单

    下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先,联动菜单的基本概念是:当用户在一个下拉菜单(一级菜单)中选择某个选项时,另一个下拉菜单(二级菜单)的内容会根据所选的选项动态...

    jQuery下拉框四级联动菜单选择代码

    本示例中的"jQuery下拉框四级联动菜单选择代码"是一个实现多级关联选择的交互功能,常用于复杂的表单或导航系统中,让用户能够通过逐级选择来定位到特定的选项。 首先,`index.html`是项目的主页面文件,它包含了...

    jQuery超简单实现“城市联动菜单”功能

    实现“城市菜单联动”超级简单,加载JS文件,调用即可。主要支持以下功能: 1、二级城市城市联动 2、所在地默认选项 3、星座默认选项 4、头像上传 Uploadify 插件 5、jQuery Validate 表单验证

    jQuery商品发布三级联动菜单代码.zip

    在这个文件中,HTML结构是实现联动菜单的基础。通常会包含多个`&lt;select&gt;`元素,每个代表一个级别的菜单。例如,一级菜单为大类,二级菜单为中类,三级菜单为小类。当用户在一级菜单中选择一个选项时,通过JavaScript...

    jQuery 多级联动菜单 div+css

    本文将深入探讨如何使用 jQuery 实现多级联动菜单,并以 "jQuery 多级联动菜单 div+css" 的实例进行解析。 首先,我们了解基础概念。`div` 是 HTML 中的一个布局容器,用于组织页面元素。`CSS`(层叠样式表)则负责...

    jQuery城市三级联动菜单特效.zip

    本篇文章将围绕“jQuery城市三级联动菜单特效”进行深入探讨,讲解其实现原理和优化技巧。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在实现城市三级联动菜单中...

    jquery实现三级联动

    jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等任务,因此使用jQuery实现联动效果非常便捷。本例主要探讨如何使用jQuery实现三级联动效果。 首先,我们来看HTML部分。HTML代码定义了三个`...

    jquery二级联动菜单

    java结合jquery进行异步提交在jsp页面中实现二级联动菜单,该源码在struts+mvc基础上实现的,简单明了。其中的数据库可自行更改,只要相应的更改连库字符串等即可。也可多加几个下拉框将项目扩展为多级联动菜单

    jquery实现地址联动

    本文将详细讲解如何利用jQuery实现“地址联动”,这是一个常见于电子商务网站和许多在线表单中的功能,它允许用户在选择省份时自动更新城市列表,选择城市时再更新区县列表,以此类推,提高用户体验。 首先,我们...

    Jquery实现下拉框、多级联动

    总的来说,使用jQuery实现多级联动下拉框涉及到了HTML结构设计、CSS样式定制和JavaScript交互编程。开发者需要理解DOM操作、事件处理和数据通信的基本原理,同时也需具备一定的前端UI设计能力,才能创造出既实用又...

    Jquery实现的的动态无刷新的二级联动菜单

    在本示例中,我们探讨的是如何利用jQuery实现一个无刷新的二级联动菜单,这涉及到jQuery库、AJAX异步请求以及JSON数据解析等多个关键知识点。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理...

    jQuery实现鼠标上下移动菜单垂直滚动效果.zip

    jQuery实现鼠标上下移动菜单垂直滚动效果是网页上的jquery菜单,鼠标放上上下滚动的导航菜单,鼠标放在任意一个菜单项上,该菜单项背景变色,高亮显示,竖向排列,没有怎么美化。

    jQuery下拉框四级联动菜单选择代码.zip

    本资源"jQuery下拉框四级联动菜单选择代码.zip"提供了一个实现四级联动下拉菜单的解决方案,适用于网页表单中需要多级筛选或选择的场景。这种功能常见于地区选择、产品分类等应用。 首先,我们来理解“四级联动”是...

    jQuery三级联动菜单选择器代码.zip

    在网页开发中,jQuery是一个非常流行的...总的来说,"jQuery三级联动菜单选择器代码"是一个实用的前端工具,通过学习和理解它的实现,开发者可以提升在网页交互设计方面的能力,同时也可以借鉴其思路来解决类似的问题。

    jQuery三级联动菜单选中赋值代码.zip

    在本案例中,"jQuery三级联动菜单选中赋值代码"是一个实现特定功能的代码示例,它涉及到网页交互设计中的一个常见需求:三级联动菜单的选择与赋值。 一、jQuery三级联动菜单的概念: 三级联动菜单通常指的是在一个...

    jquery实现ul_li菜单展开收起效果

    在网页设计中,导航菜单是不可或缺的部分,而`ul`和`li`元素通常是构建这种菜单的基础。`jQuery`作为一种强大的JavaScript库,提供了简洁的API,使得实现`ul_li`菜单的展开收起效果变得非常简便。这个效果常用于创建...

    Jquery实现下拉菜单

    在这个“Jquery实现下拉菜单”的主题中,我们将深入探讨如何在Visual Studio 2008(使用.NET Framework 3.5)环境下,利用jQuery创建功能丰富的下拉菜单,并实现点击当前菜单项时关闭其他打开的菜单。以下是关于这个...

    jQuery商品分类四级联动菜单选择代码

    《jQuery商品分类四级联动菜单选择代码详解》 在网页开发中,商品分类的展示与选择是常见的交互元素,尤其在大型电商网站上,商品类别层级多且复杂,四级联动菜单选择代码能有效地解决这一问题。本篇文章将深入解析...

Global site tag (gtag.js) - Google Analytics