jsp如何实现动态下拉菜单

jsp如何实现实现动态下拉菜单? 就是类似于 省 市 区 村 街道   5级关联菜单  数据从库取
技术ajax 或者jquery都可以
如果有例子的话更好

解决方案 »

  1.   

    这个应该不难吧首先要有对应的数据库。
    然后把每一个下拉框的数据查出来换成xml或者text，用js去解析，动态的生成option就行了
      

  2.   


    function createXMLHttpRequest(){
    var xmlHttp=false;
    try{
    xmlHttp = new XMLHttpRequest();
    }
    catch(trymicrosoft){
    try{
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }//No.1
    catch(othermicrosoft){
    try{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")}
    catch(failed){}
    }//No.1
    }
       return xmlHttp;
    }
    //获取select的值
    function getSelect(choose){
    var result = 0;
    result = choose.options[choose.selectedIndex].value;
    return result;
    }
    //创建下拉列表
    function createOption(cid,obj){
    var xmlHttp = createXMLHttpRequest();
    xmlHttp.open("get","/tools/area.jsp?pid="+escape(cid),true);
    xmlHttp.onreadystatechange = function(){
         if(xmlHttp.readyState == 4&&xmlHttp.status == 200){
    var ClassStr = xmlHttp.responseText;
    if(ClassStr.length>0){
    var ClassList = ClassStr.split("\n");
    for(var i=0;i<ClassList.length-1;i++){
    var Opt = document.createElement("option"); 
    Opt.value = ClassList[i].split(",")[0];
    Opt.appendChild(document.createTextNode(ClassList[i].split(",")[1]));
    obj.appendChild(Opt);
    }
    }//end if ClassStr.length>0
    }//end if readyState
    }//eixt function
    xmlHttp.send(null);
    }
    //删除节点
    function removeOption(obj){obj.length=1;}
    //得到大类
    function getClassList(obj){createOption(0,obj);}
    //得到小类
    function getTypeList(obj,obj2){
    var val = (Number)(getSelect(obj));
    removeOption(obj2);
    if(val!=0)
    createOption(val,obj2);
    }
    window.onload=function(){getClassList(document.getElementById("povince"));};
    //jsp的代码你自己写吧,再加两级的原理也是一样的
      

  3.   

    给你一个2个下拉框联动的例子<html>
    <head>
    <title>Jack Zheng xmlhttp test</title>
    <script language="javascript">
    function sendData(){
      var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.Open("post", "tttt.jsp?param="+document.form1.input.value, false);//向JSP提交请求
      xmlhttp.Send();
      var xml=xmlhttp.responseText;//从JSP获取结果
      var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
      var i=0;
        xmlDoc.async=false;
        xmlDoc.resolveExternals = false;
        xmlDoc.validateOnParse = false;
        xmlDoc.loadXML(xml);
        xmlObj=xmlDoc.documentElement;
        nodes = xmlDoc.documentElement.childNodes;
        //从Select中删除项目
        for(i=0;i<document.form1.output.options.length;i++){
          document.form1.output.options[i] = null;
        }

         //向Select中添加项目
        document.form1.output.options.length = 0;
        for (i=0;i<xmlObj.childNodes.length;i++){
          values=xmlObj.childNodes(i).getAttribute("id");
          labels=xmlObj.childNodes(i).text;
          //alert(values+","+labels);
          document.form1.output.add(document.createElement("OPTION"));
          document.form1.output.options[i].text=labels;
          document.form1.output.options[i].value=values;
      
        }
      }
    </script>
    </head>
    <body bgcolor="#FFFFFF">
    <form name="form1" method="post" action="">
      <select name="input" onchange="sendData()">
        <option value="200000030100000001">系-1</option>
        <option value="200000030100000002">系-2</option>
      </select>
      <select name="output">
      </select>
     </form>
    </body>////////tttt.jsp//////////
    <%@ page contentType="text/html; charset=gb2312" import="java.sql.*,qyxx.*"%>
    <%@ page import="java.io.*"%>
    <%@ page import="java.util.*"%>
    <jsp:useBean id="db" class="qyxx.connectDB" /><%
      //获取参数
      try
      {
      String strParam=request.getParameter("param");
      ResultSet rs = null;
      String sql =  "查询语句";
      rs = db.executeQuery(sql);  
      
      String bb = null;
     StringBuffer xml = new StringBuffer();
     //xml.append("<?xml version='1.0' encoding='gb2312'?>\r\n");
      xml.append("<test>\r\n");
           while(rs.next())
       {
                     xml.append("<aa id='"+rs.getString(1)+"'>\r\n")
    .append(rs.getString(2)+"\r\n")
                   .append("</aa>\r\n");
         }
     xml.append("</test>");
     
     out.println(xml.toString());//输出到HTML端的JS }
    catch(Exception e)
    {
    session.setAttribute("error","1");
    response.sendRedirect("error.jsp");
    }

    %>
      

  4.   

    添加的时候照上面的可以，如果修改的时候使用和添加一样的界面，就要注意了，你要清一下原来的select值，还要合理的设计载入数据，我曾经做过一个七级联动的功能，js写了2、3百行。
      

  5.   

    我是2级的，没有细致到村和街道，我是从数据库一次性读出，然后再request里，js负责调度显示但是缺点如果数据多了反应有点慢，特别网络不好的时候下次试试AJAX数据读取
      

  6.   

    dwr我用过  既然楼上那么多给你回答了 
    那就学习了。。