在jsp中如何实现省市镇三级菜单联动？

Question

在jsp中如何实现省市镇三级菜单联动？数据从后台数据库中读出，有比较简单的办法没有呢？向各位请教了 ，谢谢！

Answer 1

Ajax吧。
每一次上一级值改变，就是用Ajax调用后台，返回下一级的列表。
很常见的方法，不知道有没有实现好的。我没用过这个3级，之前做的项目中，数据量不太大，直接把多级的全部数据都放到JS了，然后从js里面筛选，速度比较快。但是只限于数据量不大的时候。

Answer 2

我们用google gears缓存起来，然后筛选

Answer 3

用ajax+xml.代码如下： 
1、JSP页面调用： 
  如现在你用根据省份获取地市值 ,则在省份的select的onChange事件中调用下面的函数： 
  function getCityData(obj) 
  theControl = document.getElementById("xiancode");  //地市对应的select的ID  
  parentID = obj.value;                              //省份的代码 
  FillDropDown("/sgtsc/getCityForAJAX.shtml?parentID=" + parentID, theControl) ; 
//FillDropDown函数定义见下面的fillControl.js文件，它要求传递两个参数.第一个参数是指明从数据库获取数据的文件，这个文件主要实现：根据省份从数据库获取到相应地市数据，并把数据按XML格式生成。 2、JS 
fillControl.js文件内容 
function FillDropDown(sURL, theControl) 
{ 
    var xmlHttp = XmlHttp.create(); 
    xmlHttp.open("POST", sURL, true); 
    
    xmlHttp.onreadystatechange = function () { 
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") { 
if (xmlHttp.status == 200) { 
      var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
      xmlDoc.async= false ; 
      xmlDoc.loadXML(xmlHttp.responseText); 
      FillDropDownByXml(theControl, xmlDoc); 
  } 
      } 
    } 
    xmlHttp.setRequestHeader("content-type", "text/xml"); 
    window.setTimeout(function () {xmlHttp.send(null);}, 10); 
      
}; 
function FillDropDownByXml(a_theCtrl, a_Xmldoc) 
{ 
    var ROWs = a_Xmldoc.getElementsByTagName("ROW") ; 
    var sCode = ""; 
    var sText = ""; 
    var userVal = ""; 
    var tmp; 
    var rowData; 
    
    a_theCtrl.options.length = 0; 
    
    if (ROWs.length == 0) 
    { 
        return; 
    } 
    
    a_theCtrl.options.add(new Option("","")); 
    
    for(var i=0; i < ROWs.length; i++) 
    { 
        sCode = ROWs[i].getAttribute("CODE"); 
        sText = ROWs[i].getAttribute("NAME"); 
a_theCtrl.options.add(new Option(sText, sCode)); 
    }    
} xmlHttp.js文件 var XMLHttp = { 
    _objPool: [], 
    
    _getInstance: function () 
    { 
        for (var i = 0; i < this._objPool.length; i ++) 
        { 
            if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4) 
            { 
                return this._objPool[i]; 
            } 
        } 
    
        this._objPool[this._objPool.length] = this._createObj(); 
    
        return this._objPool[this._objPool.length - 1]; 
    }, 
    
    _createObj: function () 
    { 
        if (window.XMLHttpRequest) 
        { 
            var objXMLHttp = new XMLHttpRequest(); 
    
        } 
        else 
        { 
            var MSXML = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 
                  'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP']; 
            for(var n = 0; n < MSXML.length; n ++) 
            { 
                try 
                { 
                    var objXMLHttp = new ActiveXObject(MSXML[n]); 
                    break; 
                } 
                catch(e) 
                { 
                } 
            } 
        }          
    
        if (objXMLHttp.readyState == null) 
        { 
            objXMLHttp.readyState = 0; 
    
            objXMLHttp.addEventListener("load", function () 
                { 
                    objXMLHttp.readyState = 4; 
    
                    if (typeof objXMLHttp.onreadystatechange == "function") 
                    { 
                        objXMLHttp.onreadystatechange(); 
                    } 
                },  false); 
        } 
    
        return objXMLHttp; 
    }, 
    
    sendReq: function (method, url, data, callback, listCtrl) 
    { 
        var objXMLHttp = this._getInstance(); 
    
        with(objXMLHttp) 
        { 
            try 
            { 
                if (url.indexOf("?") > 0) 
                { 
                    url += "&randnum=" + Math.random(); 
                } 
                else 
                { 
                    url += "?randnum=" + Math.random(); 
                } 
                
                open(method, url, true); 
                setRequestHeader('content-type', 'text/xml'); 
                //setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
                send(data); 
                
                onreadystatechange = function () 
                { 
                    if (objXMLHttp.readyState == 4) 
                    { 
                        if (objXMLHttp.status == 200 || objXMLHttp.status == 304) 
                        { 
                            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM") 
                            xmlDoc.async= false ; 
                            xmlDoc.loadXML(objXMLHttp.responseText); 
                            //alert(objXMLHttp.responseText); 
                            //alert(xmlDoc.parseError.errorCode + ' -- ' + xmlDoc.parseError.reason); 
                            
                            callback(listCtrl, xmlDoc ); 
                        } else { 
                            alert('ºǫ́ȡÊý³ö´í£¡'); 
                        } 
                    } 
                }             } 
            catch(e) 
            { 
                alert(e); 
            } 
        } 
    } 
};  3、java页面：  getCityForAJAX 
package com.xyworkroom.common.webform; import java.util.List; import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; import org.apache.struts.action.Action; 
import org.apache.struts.action.ActionForm; 
import org.apache.struts.action.ActionForward; 
import org.apache.struts.action.ActionMapping; 
import org.jdom.Document; 
import org.jdom.Element; 
import org.jdom.output.Format; 
import org.jdom.output.XMLOutputter; import com.xyworkroom.common.SystemCONST; 
import com.xyworkroom.sys.busi.SysServiceLocator; 
import com.xyworkroom.sys.busi.SysServiceLocatorImpl; 
import com.xyworkroom.sys.pers.CodeValue; 
import com.xyworkroom.sys.pers.Role; 
import com.xyworkroom.sys.pers.dataCheckOrg; 
/** 
*  生成代码取值列表XML, 用于AJAX测试 
* 
* @author xyworkroom create on 2008-10-23 
*/ 
public final class getCityForAJAX  extends Action { 
private SysServiceLocator sysServiceLocator = new SysServiceLocatorImpl(); public ActionForward execute(ActionMapping mapping, ActionForm form, 
HttpServletRequest request, HttpServletResponse response) throws Exception 
{ 
Document document = null; 
Element root = new Element("tree"); 
document = new Document(root); //创建文档ROOT元素 
Element treeadd; 
String  dictName = request.getParameter("dictName"); 
String  parentID = request.getParameter("parentID"); List list=null; System.out.println(dictName); 
System.out.println(parentID); // 取代码取值列表 
list = sysServiceLocator.getCodeValueService().retriveTwoCodeValueByCat( 
SystemCONST.APP_NAME, dictName,parentID) ; 
System.out.println(list.size()); 
if (list !=null) for (int i=0; i <list.size(); i++) 
{ 
CodeValue codeValue = (CodeValue)list.get(i); 
treeadd = new Element("ROW"); 
treeadd.setAttribute("CODE", codeValue.getDigCode()); 
treeadd.setAttribute("NAME", codeValue.getValueName()); 
root.addContent(treeadd); }         XMLOutputter outp = new XMLOutputter(Format.getPrettyFormat()); //格式化输出，产生缩进和换行 
        Format format = outp.getFormat(); 
        format.setEncoding("GBK"); //设置语言 
        format.setExpandEmptyElements(true); //设置输出空元素为 
        outp.setFormat(format); 
        response.setContentType("text/xml"); 
        response.setCharacterEncoding("GBK"); 
        outp.output(document, response.getWriter()); //输出XML文档 
        return null; 
    } 
} 

Answer 4

你可以用DWR,就是一个AJAX的集成包。
配置一下DWR.xml文件跟web.xml文件在JSP页面用javascript做一个逻辑判断，哪级点击，就执行哪级的处理方法
写一个处理程序，返回下一级的数据