两级联动下拉框的简单实现

最近经常用到二级菜单的情况，改变一个另一个跟着变化。自己写了一个简单的JSP页面，大家给点意见，另外大家这种情况都是怎么做的，当然Ajax除外！

<%!
	public final String _JS_GET_METHOD_NAME="_do_get_second";
	public final String _JS_ONE_ARRAY_NAME = "_js_one_array_name";
	public final String _JS_TWO_ARRAY_NAME = "_js_two_array_name";
	public final String _STYLE_WIDTH = "100";
	public final String _PARAM_FORM_NAME = "cmForm";
	public final String _TWO_DEFAULT_TEXT = "";
	public class MenuGenParamObject{
		private String paraFormName=_PARAM_FORM_NAME;
		private String paramOneIdField;
		private String paramOneNameField;
		private String paramLinkField;
		private String paramTwoIdField;
		private String paramTwoNameField;
		private String paramTwoDefaultText=_TWO_DEFAULT_TEXT;
		private String paramStyleWidth=_STYLE_WIDTH;
		private String paramJsOneArrayName=_JS_ONE_ARRAY_NAME;
		private String paramJsTwoArrayName=_JS_TWO_ARRAY_NAME;
		private String paramJsGetMethodName=_JS_GET_METHOD_NAME;
		private java.util.List paramTwoArrayList;
		private String paramPreJavascript = "";
		private String paramPostJavascript = "";
		private MenuGenParamObject(
			String paramOneIdField,
			String paramOneNameField,
			String paramLinkField,
			String paramTwoIdField,
			String paramTwoNameField,
			java.util.List paramTwoArrayList)
		{
			this.paramOneIdField=paramOneIdField;
			this.paramOneNameField=paramOneNameField;
			this.paramLinkField=paramLinkField;
			this.paramTwoIdField=paramTwoIdField;
			this.paramTwoNameField=paramTwoNameField;
			this.paramTwoArrayList=paramTwoArrayList;
		}
		public String getParaFormName() {
			return paraFormName;
		}
		public void setParaFormName(String paraFormName) {
			this.paraFormName = paraFormName;
		}
		public String getParamJsGetMethodName() {
			return paramJsGetMethodName;
		}
		public void setParamJsGetMethodName(String paramJsGetMethodName) {
			this.paramJsGetMethodName = paramJsGetMethodName;
		}
		public String getParamJsOneArrayName() {
			return paramJsOneArrayName;
		}
		public void setParamJsOneArrayName(String paramJsOneArrayName) {
			this.paramJsOneArrayName = paramJsOneArrayName;
		}
		public String getParamJsTwoArrayName() {
			return paramJsTwoArrayName;
		}
		public void setParamJsTwoArrayName(String paramJsTwoArrayName) {
			this.paramJsTwoArrayName = paramJsTwoArrayName;
		}
		public String getParamLinkField() {
			return paramLinkField;
		}
		public void setParamLinkField(String paramLinkField) {
			this.paramLinkField = paramLinkField;
		}
		public String getParamOneIdField() {
			return paramOneIdField;
		}
		public void setParamOneIdField(String paramOneIdField) {
			this.paramOneIdField = paramOneIdField;
		}
		public String getParamOneNameField() {
			return paramOneNameField;
		}
		public void setParamOneNameField(String paramOneNameField) {
			this.paramOneNameField = paramOneNameField;
		}
		public String getParamStyleWidth() {
			return paramStyleWidth;
		}
		public void setParamStyleWidth(String paramStyleWidth) {
			this.paramStyleWidth = paramStyleWidth;
		}
		public java.util.List getParamTwoArrayList() {
			return paramTwoArrayList;
		}
		public void setParamTwoArrayList(java.util.List paramTwoArrayList) {
			this.paramTwoArrayList = paramTwoArrayList;
		}
		public String getParamTwoIdField() {
			return paramTwoIdField;
		}
		public void setParamTwoIdField(String paramTwoIdField) {
			this.paramTwoIdField = paramTwoIdField;
		}
		public String getParamTwoNameField() {
			return paramTwoNameField;
		}
		public void setParamTwoNameField(String paramTwoNameField) {
			this.paramTwoNameField = paramTwoNameField;
		}
		public void setParamTwoDefaultText(String paramTwoDefaultText){
			this.paramTwoDefaultText=paramTwoDefaultText;
		}
		public String getParamTwoDefaultText(){
			return this.paramTwoDefaultText;
		}
		public void setParamPreJavascript(String paramPreJavascript){
			this.paramPreJavascript=paramPreJavascript;
		}
		public String getParamPreJavascript(){
			return this.paramPreJavascript;
		}
		public void setParamPostJavascript(String paramPostJavascript){
			this.paramPostJavascript=paramPostJavascript;
		}
		public String getParamPostJavascript(){
			return this.paramPostJavascript;
		}		
	}
	
	public void _genMenuList(MenuGenParamObject obj,java.io.Writer out){
		try{		
			out.write("<script language=\"javascript\">\n");
			out.write("<!--\n");	
			out.write(obj.getParamPreJavascript());	
			out.write("var "+obj.getParamJsTwoArrayName()+" = new Array("+obj.getParamTwoArrayList().size()+");\n");
			java.util.HashMap _local = null;
			for (int i=0;i<obj.getParamTwoArrayList().size();i++)
			{
			  	_local =  (java.util.HashMap)obj.getParamTwoArrayList().get(i);
			   	out.write(obj.getParamJsTwoArrayName()+"["+i+"] = new Array(3);\n");
			   	out.write(obj.getParamJsTwoArrayName()+"["+i+"][0] = '"+_local.get(obj.getParamTwoIdField())+"';\n");
			   	out.write(obj.getParamJsTwoArrayName()+"["+i+"][1] = '"+_local.get(obj.getParamTwoNameField())+"';\n");
			   	out.write(obj.getParamJsTwoArrayName()+"["+i+"][2] = '"+_local.get(obj.getParamLinkField())+"';\n");		  			
			}
			out.write("function "+obj.getParamJsGetMethodName()+"(){\n");
			out.write("firstid = "+obj.getParaFormName()+"."+obj.getParamOneIdField()+".options["+obj.getParaFormName()+"."+obj.getParamOneIdField()+".selectedIndex].value;\n");
			out.write("a = "+obj.getParaFormName()+"."+obj.getParamTwoIdField()+".length;\n");
			out.write("for (i=0;i<a;i++){\n");
			out.write(obj.getParaFormName()+"."+obj.getParamTwoIdField()+".remove(0);\n");
			out.write("}\n");
			out.write("op = new Option();\n");
			out.write("op.text=\""+obj.getParamTwoDefaultText()+"\";\n");
			out.write("op.value=\"\";\n");
			out.write(obj.getParaFormName()+"."+obj.getParamTwoIdField()+".add(op);\n");
			out.write("if (firstid==0){\n");
			out.write("return;\n");
			out.write("}\n");
			out.write("for (i=0;i<"+obj.getParamJsTwoArrayName()+".length;i++){\n");
			out.write("if ("+obj.getParamJsTwoArrayName()+"[i][2]==firstid)\n");
			out.write("{\n");
			out.write("op1 = new Option();\n");
			out.write("op1.value = "+obj.getParamJsTwoArrayName()+"[i][0];\n");
			out.write("op1.text = "+obj.getParamJsTwoArrayName()+"[i][1];\n");
			out.write(obj.getParaFormName()+"."+obj.getParamTwoIdField()+".options.add(op1);\n");
			out.write("}\n");
			out.write("}\n");
			out.write(obj.getParaFormName()+"."+obj.getParamTwoIdField()+".style.width="+obj.getParamStyleWidth()+";\n");
			out.write("}\n");	
			out.write(obj.getParamPostJavascript());	
			out.write("//-->\n");
			out.write("</script>\n");	
		}catch(Exception ex)
		{
		}
	}
   	public java.util.List _getTwoMenuList(
   	java.util.List twoList,
   	String parentid,
   	String linkField,
   	String twoIdField,
   	String twoNameField){
   	java.util.HashMap _local = null;
   	String linkValue = "";
   	java.util.List ret = new java.util.ArrayList();
	for (int i=0;i<twoList.size();i++)
	{
		_local =  (java.util.HashMap)twoList.get(i);
		linkValue = "" + _local.get(linkField);
		if (parentid.equals(linkValue))
		{
			ret.add(_local);
		}
	}
	return ret;
   }
%>
<!--以下为测试代码-->
<%
	java.util.List paramOneArrayList = new java.util.ArrayList();
	java.util.Map a = new java.util.HashMap();
	a.put("compid","1");
	a.put("compname","公司一");
	
	java.util.Map b = new java.util.HashMap();
	b.put("compid","2");
	b.put("compname","公司二");
	
	java.util.Map c = new java.util.HashMap();
	c.put("compid","3");
	c.put("compname","公司三");		
	paramOneArrayList.add(a);
	paramOneArrayList.add(b);
	paramOneArrayList.add(c);
	
	java.util.List paramTwoArrayList = new java.util.ArrayList();
	java.util.Map a1 = new java.util.HashMap();
	a1.put("compid","1");
	a1.put("deptid","10");	
	a1.put("deptname","行政部");
	
	java.util.Map b1 = new java.util.HashMap();
	b1.put("compid","1");
	b1.put("deptid","20");	
	b1.put("deptname","财务部");	
	
	java.util.Map c1 = new java.util.HashMap();
	c1.put("compid","2");
	c1.put("deptid","30");	
	c1.put("deptname","市场部");				
	
	paramTwoArrayList.add(a1);
	paramTwoArrayList.add(b1);
	paramTwoArrayList.add(c1);
	MenuGenParamObject obj = new MenuGenParamObject("compid","compname","compid","deptid","deptname",paramTwoArrayList);
	_genMenuList(obj,out);
%>
<form name="<%=_PARAM_FORM_NAME%>">
	公司名称<select name="compid" onchange="<%=_JS_GET_METHOD_NAME%>();" style="width:100">
		<option value=""></option>
		<option value="1">公司一</option>
		<option value="2">公司二</option>
		<option value="3">公司三</option>
	</select>
	部门名称
	<select name="deptid" style="width:<%=_STYLE_WIDTH%>">
	</select>
</form>

设计添加了paramPreJavascript和paramPostJavascript，怎么有点儿Around AOP的感觉！

我看到jsp里有java代码就很不舒服

我只实现了简单的功能，如果成熟了考虑封装成Tag！目前这个JSP将被Include进来使用！

有个项目叫struts-menu，功能比较完备了，你看看那个项目再考虑下一步该怎么办吧

struts-menu不是我想要的东西，我的是下拉框，是HTML的select控件，而struts-menu的example都是一些菜单方面的东西。

哦，是我误解了

JSP实现太复杂而且不方便,那来个幽雅点的Tag包装!

package com.jamesby.cm.common.utils;

import java.util.List;

import javax.servlet.jsp.tagext.Tag;
import javax.servlet.jsp.tagext.TagSupport;

public class TwoLevelDropdownTag extends TagSupport {
	public final String _PAGE_SCOPE = "page";
	public final String _REQUERT_SCOPE = "request";
	public final String _SESSION_SCOPE = "session";
	public final String _APPLICATION_SCOPE = "application";
	
	public final String _JS_GET_METHOD_NAME = "_do_get_second";

	public final String _JS_ONE_ARRAY_NAME = "_js_one_array_name";

	public final String _JS_TWO_ARRAY_NAME = "_js_two_array_name";

	public final String _STYLE_WIDTH = "100";

	public final String _PARAM_FORM_NAME = "cmForm";

	public final String _TWO_DEFAULT_TEXT = "";

	private String paramFormName = _PARAM_FORM_NAME;

	private String paramOneIdField;

	private String paramOneNameField;

	private String paramLinkField;

	private String paramTwoIdField;

	private String paramTwoNameField;
	
	private java.util.List paramTwoArrayList;
	
	private String paramTwoDefaultText = _TWO_DEFAULT_TEXT;

	private String paramStyleWidth = _STYLE_WIDTH;

	private String paramJsOneArrayName = _JS_ONE_ARRAY_NAME;

	private String paramJsTwoArrayName = _JS_TWO_ARRAY_NAME;

	private String paramJsGetMethodName = _JS_GET_METHOD_NAME;


	private String paramPreJavascript = "";

	private String paramPostJavascript = "";
	
	private String scope = _REQUERT_SCOPE;
	
	private String itemsName="items";

	public String getItemsName() {
		return itemsName;
	}

	public void setItemsName(String itemsName) {
		this.itemsName = itemsName;
	}
	public TwoLevelDropdownTag() {
	}

	public int doEndTag() {
		try{		
			if (!_PAGE_SCOPE.equals(scope)&&!_REQUERT_SCOPE.equals(scope)&&!_SESSION_SCOPE.equals(scope)&&!_APPLICATION_SCOPE.equals(scope))
			{
				throw new RuntimeException("scope is invalid.....................");
			}
			
			if (_PAGE_SCOPE.equals(scope))
			{
				paramTwoArrayList = (List)this.pageContext.getAttribute(itemsName);
			}
			if (_REQUERT_SCOPE.equals(scope))
			{
				paramTwoArrayList = (List)this.pageContext.getRequest().getAttribute(itemsName);
			}
			if (_SESSION_SCOPE.equals(scope))
			{
				paramTwoArrayList = (List)this.pageContext.getSession().getAttribute(itemsName);
			}
			if (_APPLICATION_SCOPE.equals(scope))
			{
				paramTwoArrayList = (List)this.pageContext.getServletContext().getAttribute("itemsName");
			}
			
			if (null==paramTwoArrayList) throw new RuntimeException("items not exists............");
			
			java.io.Writer out = this.pageContext.getOut();
			out.write("<script language=\"javascript\">\n");
			out.write("<!--\n");	
			out.write(getParamPreJavascript());	
			out.write("var "+getParamJsTwoArrayName()+" = new Array("+getParamTwoArrayList().size()+");\n");
			java.util.HashMap _local = null;
			for (int i=0;i<getParamTwoArrayList().size();i++)
			{
			  	_local =  (java.util.HashMap)getParamTwoArrayList().get(i);
			   	out.write(getParamJsTwoArrayName()+"["+i+"] = new Array(3);\n");
			   	out.write(getParamJsTwoArrayName()+"["+i+"][0] = '"+_local.get(getParamTwoIdField())+"';\n");
			   	out.write(getParamJsTwoArrayName()+"["+i+"][1] = '"+_local.get(getParamTwoNameField())+"';\n");
			   	out.write(getParamJsTwoArrayName()+"["+i+"][2] = '"+_local.get(getParamLinkField())+"';\n");		  			
			}
			out.write("function "+getParamJsGetMethodName()+"(){\n");
			out.write("firstid = "+getParamFormName()+"."+getParamOneIdField()+".options["+getParamFormName()+"."+getParamOneIdField()+".selectedIndex].value;\n");
			out.write("a = "+getParamFormName()+"."+getParamTwoIdField()+".length;\n");
			out.write("for (i=0;i<a;i++){\n");
			out.write(getParamFormName()+"."+getParamTwoIdField()+".remove(0);\n");
			out.write("}\n");
			out.write("op = new Option();\n");
			out.write("op.text=\""+getParamTwoDefaultText()+"\";\n");
			out.write("op.value=\"\";\n");
			out.write(getParamFormName()+"."+getParamTwoIdField()+".add(op);\n");
			out.write("if (firstid==0){\n");
			out.write("return;\n");
			out.write("}\n");
			out.write("for (i=0;i<"+getParamJsTwoArrayName()+".length;i++){\n");
			out.write("if ("+getParamJsTwoArrayName()+"[i][2]==firstid)\n");
			out.write("{\n");
			out.write("op1 = new Option();\n");
			out.write("op1.value = "+getParamJsTwoArrayName()+"[i][0];\n");
			out.write("op1.text = "+getParamJsTwoArrayName()+"[i][1];\n");
			out.write(getParamFormName()+"."+getParamTwoIdField()+".options.add(op1);\n");
			out.write("}\n");
			out.write("}\n");
			out.write(getParamFormName()+"."+getParamTwoIdField()+".style.width="+getParamStyleWidth()+";\n");
			out.write("}\n");	
			out.write(getParamPostJavascript());	
			out.write("//-->\n");
			out.write("</script>\n");	
			out.flush();
		}catch(java.io.IOException ex)
		{
			ex.printStackTrace();
		}		
		return Tag.EVAL_PAGE;
	}

	public String get_JS_GET_METHOD_NAME() {
		return _JS_GET_METHOD_NAME;
	}
	public String get_JS_ONE_ARRAY_NAME() {
		return _JS_ONE_ARRAY_NAME;
	}
	public String get_JS_TWO_ARRAY_NAME() {
		return _JS_TWO_ARRAY_NAME;
	}


	public String get_PARAM_FORM_NAME() {
		return _PARAM_FORM_NAME;
	}

	public String get_STYLE_WIDTH() {
		return _STYLE_WIDTH;
	}

	public String get_TWO_DEFAULT_TEXT() {
		return _TWO_DEFAULT_TEXT;
	}

	public String getParamFormName() {
		return paramFormName;
	}

	public void setParamFormName(String paraFormName) {
		this.paramFormName = paraFormName;
	}

	public String getParamJsGetMethodName() {
		return paramJsGetMethodName;
	}

	public void setParamJsGetMethodName(String paramJsGetMethodName) {
		this.paramJsGetMethodName = paramJsGetMethodName;
	}

	public String getParamJsOneArrayName() {
		return paramJsOneArrayName;
	}

	public void setParamJsOneArrayName(String paramJsOneArrayName) {
		this.paramJsOneArrayName = paramJsOneArrayName;
	}

	public String getParamJsTwoArrayName() {
		return paramJsTwoArrayName;
	}

	public void setParamJsTwoArrayName(String paramJsTwoArrayName) {
		this.paramJsTwoArrayName = paramJsTwoArrayName;
	}

	public String getParamLinkField() {
		return paramLinkField;
	}

	public void setParamLinkField(String paramLinkField) {
		this.paramLinkField = paramLinkField;
	}

	public String getParamOneIdField() {
		return paramOneIdField;
	}

	public void setParamOneIdField(String paramOneIdField) {
		this.paramOneIdField = paramOneIdField;
	}

	public String getParamOneNameField() {
		return paramOneNameField;
	}

	public void setParamOneNameField(String paramOneNameField) {
		this.paramOneNameField = paramOneNameField;
	}

	public String getParamPostJavascript() {
		return paramPostJavascript;
	}

	public void setParamPostJavascript(String paramPostJavascript) {
		this.paramPostJavascript = paramPostJavascript;
	}

	public String getParamPreJavascript() {
		return paramPreJavascript;
	}

	public void setParamPreJavascript(String paramPreJavascript) {
		this.paramPreJavascript = paramPreJavascript;
	}

	public String getParamStyleWidth() {
		return paramStyleWidth;
	}

	public void setParamStyleWidth(String paramStyleWidth) {
		this.paramStyleWidth = paramStyleWidth;
	}


	public String getParamTwoDefaultText() {
		return paramTwoDefaultText;
	}

	public void setParamTwoDefaultText(String paramTwoDefaultText) {
		this.paramTwoDefaultText = paramTwoDefaultText;
	}

	public String getParamTwoIdField() {
		return paramTwoIdField;
	}

	public void setParamTwoIdField(String paramTwoIdField) {
		this.paramTwoIdField = paramTwoIdField;
	}

	public String getParamTwoNameField() {
		return paramTwoNameField;
	}

	public void setParamTwoNameField(String paramTwoNameField) {
		this.paramTwoNameField = paramTwoNameField;
	}

	public String getScope() {
		return scope;
	}

	public void setScope(String scope) {
		this.scope = scope;
	}

	public java.util.List getParamTwoArrayList() {
		return paramTwoArrayList;
	}
}

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
  <tlibversion>1.0</tlibversion>
  <jspversion>1.1</jspversion>
  <shortname>display</shortname>
  <uri>http://jakarta.apache.org/taglibs/display</uri>
  <info>
         A description of the display tag library goes here...
  </info>
  <tag>
    <name>select2</name>
    <tagclass>com.jamesby.cm.common.utils.TwoLevelDropdownTag</tagclass>
    <bodycontent>EMPTY</bodycontent>
    <attribute>
      <name>paramOneIdField</name>
      <required>true</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>paramOneNameField</name>
      <required>true</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute> 
    <attribute>
      <name>paramLinkField</name>
      <required>true</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>  
    <attribute>
      <name>paramTwoIdField</name>
      <required>true</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>paramTwoNameField</name>
      <required>true</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>               
    <attribute>
      <name>paramFormName</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>scope</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>itemsName</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>paramTwoDefaultText</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>  
    <attribute>
      <name>paramStyleWidth</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>paramJsOneArrayName</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute> 
    <attribute>
      <name>paramJsTwoArrayName</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>paramJsGetMethodName</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>paramPreJavascript</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>paramPostJavascript</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>                                
  </tag> 
</taglib>

<%@ page contentType="text/html;charset=GBK" language="java"%>
<%@ taglib uri="/tags/taglib_xb" prefix="xb"%>
<%
	java.util.List paramTwoArrayList = new java.util.ArrayList();
	java.util.Map a1 = new java.util.HashMap();
	a1.put("compid","1");
	a1.put("deptid","10");	
	a1.put("deptname","行政部");
	
	java.util.Map b1 = new java.util.HashMap();
	b1.put("compid","1");
	b1.put("deptid","20");	
	b1.put("deptname","财务部");	
	
	java.util.Map c1 = new java.util.HashMap();
	c1.put("compid","2");
	c1.put("deptid","30");	
	c1.put("deptname","市场部");				
	
	paramTwoArrayList.add(a1);
	paramTwoArrayList.add(b1);
	paramTwoArrayList.add(c1);
	pageContext.setAttribute("items",paramTwoArrayList);
%>
<xb:select2 paramOneIdField="compid" paramOneNameField="compname" paramLinkField="compid" paramTwoIdField="deptid" paramTwoNameField="deptname" scope="page"/>
<form name="cmForm">
	公司名称<select name="compid" onchange="_do_get_second();" style="width:100">
		<option value=""></option>
		<option value="1">公司一</option>
		<option value="2">公司二</option>
		<option value="3">公司三</option>
	</select>
	部门名称
	<select name="deptid" style="width:100">
	</select>
</form>

http://blog.csdn.net/KimSoft/archive/2006/06/14/796430.aspx

我以前写的，或许对你有用，和语言无关，只要构造出javascript数组。支持N级。在ie5,ie6,ie7,firefox1,firefox2等浏览器下测试通过。

楼主可以试一下。