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

最新推荐文章于 2024-08-22 14:32:34 发布

singhoo123

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量87

点赞数

分类专栏： JavaScript 文章标签： javascript java json ViewUI

本文链接：https://blog.csdn.net/singhoo123/article/details/84129479

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏


<%@ 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>

singhoo123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现的可重用的联动菜单

[code="js"]Insert title here$(document).ready(function(){ var url = ["productSiteSortAction!queryProductTag.action","productSiteSortAction!queryProductSubtag.action"];...
复制链接

扫一扫

专栏目录