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);//创建selectfor(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>