<%@ 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下拉框四级联动菜单选择代码,多级联动菜单选择效果,带搜索和添加菜单功能。
实现“城市菜单联动”超级简单,加载JS文件,调用即可。主要支持以下功能: 1、二级城市城市联动 2、所在地默认选项 3、星座默认选项 4、头像上传 Uploadify 插件 5、jQuery Validate 表单验证
jquery实现的多级联动下拉框,由div标签加上span标签实现。
jquery实现三级联动的例子,四级、五级联动估计用的很少吧,但实现起来都是一样的。文档附带例子,包括jsp、jquery、和action的代码。 备注:用的时候别忘记加载jquery.js
jquery实现ul_li菜单展开收起效果.
jquery实现地址联动
java结合jquery进行异步提交在jsp页面中实现二级联动菜单,该源码在struts+mvc基础上实现的,简单明了。其中的数据库可自行更改,只要相应的更改连库字符串等即可。也可多加几个下拉框将项目扩展为多级联动菜单
JQuery实现动态滚动菜单效果 JQuery实现动态滚动菜单效果 JQuery实现动态滚动菜单效果
jQuery实现精美二级菜单,增加网页的美观效果
该小插件是自己写的谢谢指教。可以改写为三级菜单。
jQuery实现右键菜单 jQuery实现右键菜单 jQuery实现右键菜单 jQuery实现右键菜单 jQuery实现右键菜单
jQuery实现鼠标上下移动菜单垂直滚动效果是网页上的jquery菜单,鼠标放上上下滚动的导航菜单,鼠标放在任意一个菜单项上,该菜单项背景变色,高亮显示,竖向排列,没有怎么美化。
jquery实现下拉菜单
jQuery支持多选和单选的三级联动菜单选中赋值代码,input文本框点击弹出三级联动菜单选择,可对已选中的菜单选项进行删除。
使用jquery实现二级联动
jQuery实现省市区三级联动菜单
jquery实现三级下拉菜单,兼容各个浏览器,小巧实用
JQuery实现的在前端进行省市联动选择
基于jquery的用实现二级动态联动菜单,里面用到jquer+ajax+json解析方面知识,通过无刷新去后台值实现的,可用性非常好,欢迎大家下载学习。