关于省市县三级联动

Question

我有一个表里面包括中国所有省市县的名字和编码。现在我做一个修改页面。包括一个省市县的三级联动菜单。哪位高手帮帮忙啊

Answer 1

如果数据量不大的话，可以一次性读到页面，然后用js控制
如果数据量大的话，建议还是用ajax吧

Answer 2

数据是2006年的：http://download.csdn.net/source/585203

Answer 3

用ajax吧，那东西我做过。很简单。

Answer 4

做的方法很多。我用ajax+php做过。ajax+xml没做过。关键在于如何保存数据。是用数组还是用xml

Answer 5

用ajax,直接从数据库里取东西.效果不错的.

Answer 6

用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;
    }
}