类似这个
http://www.10090.com/demo/hpmenu/hpmenu.html二级联动就可以了两个字段都是动态从数据库中读取郁闷了好几天了,帮帮忙,谢谢!

解决方案 »

  1.   

    只要你搞清楚,父菜单与子菜单之间的联系(sql),实现起来并不难
    你的菜单是放一个表中,还是父菜单放一个表,子菜单放另一个表?
      

  2.   

    一个表,父菜单好多重复select distinct province from table
      

  3.   

    根据select的值,得到父id的值,使用ajax传递到服务器,返回它的下级,显示即可
      

  4.   

    帮你顶下!!!
    天气冷了,帮你的女朋友,老婆买件衣服吧:http://shop.paipai.com/312561265
      

  5.   

    我找了一个  但是 是servlet的 我把它改写成jsp 出错  郁闷源文件:dyList.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %><head>     <META http-equiv=Content-Type content="text/html; charset=UTF-8"></head><script language="javascript">      var XMLHttpReq;      //创建XMLHttpRequest对象             function createXMLHttpRequest() {             if(window.XMLHttpRequest) { //Mozilla 浏览器                    XMLHttpReq = new XMLHttpRequest();             }             else if (window.ActiveXObject) { // IE浏览器                    try {                           XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");                    } catch (e) {                           try {                                   XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");                           } catch (e) {}                    }             }      }      //发送请求函数      function sendRequest(url) {             createXMLHttpRequest();             XMLHttpReq.open("GET", url, true);             XMLHttpReq.onreadystatechange = processResponse;//指定响应函数             XMLHttpReq.send(null);  // 发送请求      }      // 处理返回信息函数      function processResponse() {       if (XMLHttpReq.readyState == 4) { // 判断对象状态             if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息                    updateList();            } else { //页面不正常                  window.alert("您所请求的页面有异常。");            }         }    }    // 刷新列表框函数    function refreshList() {         var sort = document.getElementById("sort").value;         if(sort == "" ) {                clearList();                return;         }         var url = "dyList?sort=" + sort;                    sendRequest(url)      }    // 更新列表框中列表项函数     function updateList() {          clearList();          var product = document.getElementById("product");          var results = XMLHttpReq.responseXML.getElementsByTagName("name");          var option = null;           for(var i = 0; i < results.length; i++) {               option = document.createElement("option");               option.appendChild(document.createTextNode(results[i].firstChild. nodeValue));               product.appendChild(option);          }     }    // 清除列表框中原有选项的函数     function clearList() {          var product = document.getElementById("product");          while(product.childNodes.length > 0) {               product.removeChild(product.childNodes[0]);          }     } </script> <table  style="BORDER-COLLAPSE: collapse" borderColor=#111111             cellSpacing=0 cellPadding=2 width=200 bgColor=#f5efe7 border=0>    <TR>         <TD align=middle height=4 colspan="2"><IMG height=4          src="images/promo_list_top.gif" width="100%"          border=0>          </TD>    </TR>    <TR>       <TD align=middle bgColor=#dbc2b0                        height=19 colspan="2"><B>商品搜索</B>       </TD>    </TR>    <tr>        <td height="20">                   品牌选择:         </td>         <td height="20">                <select id="sort" onchange="refreshList();">                       <option value="default">请选择</option>                       <option value="IBM">IBM</option>                       <option value="SONY">SONY</option>                       <option value="联想">联想</option>                </select>          </td>     </tr>     <tr>          <td height="20">                 商品信息:          </td>          <td height="20">          <select id="product" >          </select>          </td>     </tr> </table>在该页面中,第一个列表框中提供了对应的品牌选项以供用户进行选择,当用户选择了所需的品牌信息后,将调用“refreshList()”函数,在该函数中首先获取到所选列表项的标志信息,如果用户选择的是“请选择”,则调用“clearList()”函数清除第二个列表框中的内容,如果用户选择的是有效的品牌选项,则借助Ajax提交请求,并同时提交用户所选选项的标识信息到服务器端,等待服务器端的处理。当服务器端后续处理完成后,将返回第二个列表框中的信息,然后在Ajax提供的处理函数中在对应的列表框中显示,在显示时使用了本书第3章中介绍的使用DOM操作HTML的方式。该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到,当浏览器端提交“dyList”请求时,将由服务器端的类名为“classmate.DyListAction”的Servlet程序进行处理。<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4"      xmlns="http://java.sun.com/xml/ns/j2ee"      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"      xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee      http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">      <servlet>         <servlet-name>ms1</servlet-name>         <servlet-class>classmate.DyListAction</servlet-class>     </servlet>     <servlet-mapping>          <servlet-name>ms1</servlet-name>          <url-pattern>/dyList</url-pattern>     </servlet-mapping>  <!-- The Welcome File List -->  <welcome-file-list>    <welcome-file>dyList.jsp</welcome-file>  </welcome-file-list></web-app>下面我们关注一下服务器端Servlet程序DyListAction.java中对应的程序代码。当接收到浏览器端提交的请求后,Servlet程序首先获取浏览器端提交的所选列表项的标志信息,即所选择的商品类别信息,然后借助封装了数据库操作的JavaBean完成数据库的查询工作,依据类别获取到对应的商品名称信息。package classmate; import java.io.IOException;…… public class DyListAction extends HttpServlet {          public void init(ServletConfig config) throws ServletException {     }     /*     *  处理<GET> 请求方法     */    protected void doGet(HttpServletRequest request, HttpServletResponse response)    throws ServletException, IOException {     //设置接收信息的字符集     request.setCharacterEncoding("UTF-8");     //接收浏览器端提交的信息           String sort = request.getParameter("sort");           //设置输出信息的格式及字符集                 response.setContentType("text/xml; charset=UTF-8");         response.setHeader("Cache-Control", "no-cache");         //创建输出流对象         PrintWriter out = response.getWriter();         //依据验证结果输出不同的数据信息         out.println("<response>");                       //数据库操作         DB db = new DB();          ResultSet rs;         String strSql=null;         //查找该品牌具体型号         strSql ="select product.name,product.id from sort,product where sort.id=
                            product.sortid and sort.name='"+ sort + "'";          rs = db.executeQuery(strSql);          try {                while (rs.next()) {                       out.println("<name>" + rs.getString("name") + "</name>");                }          } catch (SQLException e) {                e.printStackTrace();          }           out.println("</response>");          out.close();    }}注意在本例中,返回的XML文档的格式如下所示:<response>       <name>商品名称1</ name>       <name>商品名称2</name></response>读者可以进一步完善该程序,实现从服务器端动态获取第一个列表框中的信息,然后再依据用户选择动态显示第二个列表框中的信息。
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>多级联动菜单</title><script type="text/javascript">
    var xmlHttp;        //用于保存XMLHttpRequest对象的全局变量
    var targetSelId;    //用于保存要更新选项的列表id
    var selArray;       //用于保存级联菜单id的数组//用于创建XMLHttpRequest对象
    function createXmlHttp() {
        //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
        if (window.XMLHttpRequest) {
           xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
        } else {
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
        }
    }//获取列表选项的调用函数
    function buildSelect(selectedId, targetId) {
        if (selectedId == "") {                             //selectedId为空串表示选中了默认项
            clearSubSel(targetId);                          //清除目标列表及下级列表中的选项
            return;                                         //直接结束函数调用,不必向服务器请求信息
        }
        targetSelId = targetId;                             //将传入的目标列表id赋值给targetSelId变量
        createXmlHttp();                                    //创建XmlHttpRequest对象
        xmlHttp.onreadystatechange = buildSelectCallBack;   //设置回调函数
        xmlHttp.open("GET", "select_menu.jsp?selectedId=" + selectedId, true);
        xmlHttp.send(null);
    }//获取列表选项的回调函数
    function buildSelectCallBack() {
        if (xmlHttp.readyState == 4) {
            var optionsInfo = eval("("+xmlHttp.responseText+")");           //将从服务器获得的文本转为对象直接量
            var targetSelNode = document.getElementById(targetSelId);
            clearSubSel(targetSelId);                                    //清除目标列表中的选项
            //遍历对象直接量中的成员
            for (var o in optionsInfo) {
                targetSelNode.appendChild(createOption(o, optionsInfo[o])); //在目标列表追加新的选项
            }
        }
    }//根据传入的value和text创建选项
    function createOption(value, text) {
         var opt = document.createElement("option");                        //创建一个option节点
         opt.setAttribute("value", value);                                  //设置value
         opt.appendChild(document.createTextNode(text));                    //给节点加入文本信息
         return opt;
    }//清除传入的列表节点内所有选项
    function clearOptions(selNode) {
        selNode.length = 1;                                                 //设置列表长度为1,仅保留默认选项
        selNode.options[0].selected = true;                                 //选中默认选项
    }//初始化列表数组(按等级)
    function initSelArray() {
        selArray = arguments;                                               //arguments对象包含了传入的所有参数
    }//清除下级子列表选项
    function clearSubSel(targetId) {
        var canClear = false;                                               //设置清除开关,初始值为假
        for (var i=0; i<selArray.length; i++) {                             //遍历列表数组
            if (selArray[i]==targetId) {                                    //当遍历至目标列表时,打开清除开关
                canClear = true;
            }
            if (canClear) {                                                 //从目标列表开始到最下级列表结束,开关始终保持打开
                clearOptions(document.getElementById(selArray[i]));         //清除该级列表选项
            }
        }
    }
    </script>
    </head><!-- 页面加载完毕做两件事:1.初始化列表数组 2.为第一个列表赋值 -->
    <body onload="initSelArray('selA','selB','selC');buildSelect('INIT', 'selA')">
    <h1>多级联动菜单</h1>
    <table>
    <tr>
        <td>列表A</td>
        <td>
            <select name="selA" id="selA" onchange="buildSelect(this.value, 'selB')">
                <option value="" selected>------请选择------</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>列表B</td>
        <td>
            <select name="selB" id="selB" onchange="buildSelect(this.value, 'selC')">
                <option value="" selected>------请选择------</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>列表C</td>
        <td>
            <select name="selC" id="selC">
                <option value="" selected>------请选择------</option>
            </select>
        </td>
    </tr>
    </table>
    </body>
    </html>
      

  7.   

    <%@ page contentType="text/plain; charset=UTF-8"%>
    <%@ page language="java"%>
    <%@ page import="java.sql.*,ajax.db.DBUtils"%>
    <%!
        //访问数据库取得下级选项信息
        String getOptions(String selectedId) {
            int counter = 0;                            //计数器
            StringBuffer opts = new StringBuffer("{");  //保存选项信息
            String sql = "select * from select_menu where pid = ? order by seq asc";//定义查询数据库的SQL语句
            Connection conn = null;                 //声明Connection对象
            PreparedStatement pstmt = null;         //声明PreparedStatement对象
            ResultSet rs = null;                    //声明ResultSet对象
            try {
                conn = DBUtils.getConnection();     //获取数据库连接
                pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
                pstmt.setString(1, selectedId);     //设置参数
                rs = pstmt.executeQuery();          //执行查询,返回结果集
                while (rs.next()) {                 //遍历结果集
                    //如果不是第一项,追加一个“,”用于分隔选项
                    if (counter > 0) {
                        opts.append(",");
                    }
                    opts.append("'");
                    opts.append(rs.getString("id"));
                    opts.append("':'");
                    opts.append(rs.getString("text"));
                    opts.append("'");
                    counter++;                      //计数器加1
                }
            } catch (SQLException e) {
                System.out.println(e.toString());
            } finally {
                DBUtils.close(rs);         //关闭结果集
                DBUtils.close(pstmt);      //关闭PreparedStatement
                DBUtils.close(conn);       //关闭连接
            }
            opts.append("}");
            return opts.toString();
        }
    %>
    <%
        out.clear();                                            //清空当前的输出内容(空格和换行符)    String selectedId = request.getParameter("selectedId"); //获取selectedId参数
        String optionsInfo = getOptions(selectedId);            //调用getOptions方法取得下级选项信息    out.print(optionsInfo);                                 //输出下级选项信息
    %>
      

  8.   

    <%@ page contentType="text/plain; charset=UTF-8"%>
    <%@ page language="java"%>
    <%@ page import="java.sql.*,ajax.db.DBUtils"%>
    <%!
        //访问数据库取得下级选项信息
        String getOptions(String selectedId) {
            int counter = 0;                            //计数器
            StringBuffer opts = new StringBuffer("{");  //保存选项信息
            String sql = "select * from select_menu where pid = ? order by seq asc";//定义查询数据库的SQL语句
            Connection conn = null;                 //声明Connection对象
            PreparedStatement pstmt = null;         //声明PreparedStatement对象
            ResultSet rs = null;                    //声明ResultSet对象
            try {
                conn = DBUtils.getConnection();     //获取数据库连接
                pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
                pstmt.setString(1, selectedId);     //设置参数
                rs = pstmt.executeQuery();          //执行查询,返回结果集
                while (rs.next()) {                 //遍历结果集
                    //如果不是第一项,追加一个“,”用于分隔选项
                    if (counter > 0) {
                        opts.append(",");
                    }
                    opts.append("'");
                    opts.append(rs.getString("id"));
                    opts.append("':'");
                    opts.append(rs.getString("text"));
                    opts.append("'");
                    counter++;                      //计数器加1
                }
            } catch (SQLException e) {
                System.out.println(e.toString());
            } finally {
                DBUtils.close(rs);         //关闭结果集
                DBUtils.close(pstmt);      //关闭PreparedStatement
                DBUtils.close(conn);       //关闭连接
            }
            opts.append("}");
            return opts.toString();
        }
    %>
    <%
        out.clear();                                            //清空当前的输出内容(空格和换行符)    String selectedId = request.getParameter("selectedId"); //获取selectedId参数
        String optionsInfo = getOptions(selectedId);            //调用getOptions方法取得下级选项信息    out.print(optionsInfo);                                 //输出下级选项信息
    %>
      

  9.   

    见帖子
    http://topic.csdn.net/u/20071029/12/f0d8696c-c1c3-4ec2-b9ef-f95ff61d8fe3.html我的回答
      

  10.   

    我的blog里有源代码,就是你要的这种 :  http://blog.csdn.net/zenwong
      

  11.   

    我这里有两个第一个   http://blog.csdn.net/zenwong/archive/2007/10/30/1857605.aspx第二个   http://blog.csdn.net/zenwong/archive/2007/10/30/1857513.aspx
      

  12.   

    up  不知道LZ现在搞定没
     
      

  13.   

    尚学堂科技马士兵老师的《网上商城视频教程》对这个有详细的视频讲解,看看去吧
    http://lib.verycd.com/2006/11/16/0000128251.html
      

  14.   

    呵呵,可以参看下我的文章~~
    http://j2ee.blog.sohu.com/68011726.html
      

  15.   

    谈谈思路比较好。这种东西一段时间来做的巨多。如果你的菜单放在一个表内,那么请加一个标识,加一个parent字段,区分子菜单和父菜单。SQL方面你也更方便,select * from menu where parent =?AJAX , 既然你是用这个东西,那相信用AJAX 的方式与后台沟通楼主是应该清楚的。建一个Servlet,调用你的逻辑方法返回值(list),迭代list,插入到目标XML中,返回XML用 xmlHttpRequest 对象返回XML , 解释XML 循环读出 Servlet 返回的 xml 子节点,逐一添加到子菜单的<Select> 的 中去 (<option>)。
      

  16.   

    思路:大类select控件的onchange事件将自身的大类id传递给javascript函数,然后js函数利用ajax查询数据库得到该大类所属小类信息(我这里返回的是一段xml),并显示到另一个select控件中即可。实现起来比树形菜单要简单。-------------页面代码片段----------------<tr>
    <td>
    <b>节目类型</b>
    </td>
    <td>
    <select name="bigTypeSelect" onchange="getSmallType(this.value);">
    <option value="-1">
    未选择
    </option>
    <c:forEach items="${bigTypeList}" var="temp">
    <option value="${temp.typeId}">
    ${temp.typeName}
    </option>
    </c:forEach>
    </select>
    &nbsp;
    <select name="typeId">
    <option value="-1">
    未选择
    </option>
    </select>
    </td>
    </tr><script type="text/javascript">
    //创建XMLHttpRequest对象       
         function createXMLHttpRequest() 
         {
         //Mozilla 浏览器
            if(window.XMLHttpRequest) 
            { 
                XMLHttpReq = new XMLHttpRequest();
            }
            // IE浏览器
             else if (window.ActiveXObject) 
             { 
                try 
                {
                    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
                } 
                catch (e) 
                {
                    try 
                    {
                        XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                    } 
                    catch (e) {}
                }
            }
         }

         //发送请求函数
    function getSmallType(bigTypeId)
    {
    if(bigTypeId == -1)
    {
    var typeId = document.forms[0].typeId;
    //清空select所有option选项
    typeId.options.length = 0;
    var option = document.createElement("option");
    option.text = "未选择";
    option.value = -1;
    typeId.options.add(option);
    return false;
    }

    createXMLHttpRequest();
    XMLHttpReq.onreadystatechange = getFinsh; 

    var url = "getsmalltype.do?bigtypeid="+bigTypeId;
    XMLHttpReq.open("post",url , true); 
    XMLHttpReq.send(null); 
    }

    //处理返回响应函数
    function getFinsh()

    if (XMLHttpReq.readyState == 4) 
    {
    if (XMLHttpReq.status == 200) 

    if(window.ActiveXObject)
    {
    var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
    }
    else
    {
    if(document.implementation && document.implementation.createDocument)
    {
    var xmlDom=document.implementation.createDocument("","doc",null);
    }
    }
    xmlDom.async = false;
    xmlDom.loadXML(XMLHttpReq.responseText);

    var typeId = document.forms[0].typeId;
    //清空select所有option选项
    typeId.options.length = 0;

    var smallTypes = xmlDom.getElementsByTagName("smalltypes/smalltype");
    //包含子类信息
    if(smallTypes.length != 0)
    {
    var option = document.createElement("option");
    option.text = "未选择";
    option.value = -1;
    typeId.options.add(option);

    for(var i = 0;i < smallTypes.length;i ++)
             {
                //子类ID
            var typeIdText = smallTypes[i].firstChild.text;
            //alert(typeIdText);
            
            //子类名
                var typeNameText = smallTypes[i].lastChild.text;
                //alert(typeNameText);
                
               //添加子类信息到下拉列表
    var option = document.createElement("option");
    option.text = typeNameText;
    option.value = typeIdText;
    typeId.options.add(option);
                }
                }
                else
                {
                 var option = document.createElement("option");
    option.text = "无子类";
    option.value = document.forms[0].bigTypeSelect.options(document.forms[0].bigTypeSelect.selectedIndex).value;
    typeId.options.add(option);
                }

    else 

    alert("Error data:\n"+ XMLHttpReq.statusText); 
        } 
        }
     }
    </script>        //获得小类信息XML
    public String getSmallTypeByBigTypeIdXml(String configFilePath,
    String bigTypeId) {
    File file = new File(configFilePath);
    Configuration conf = new Configuration().configure(file);
    SessionFactory sessionFactory = null;
    sessionFactory = conf.buildSessionFactory();
    Session session = sessionFactory.openSession();
    Query query = session
    .createQuery("from TypeInfo where parentId = :parentid");
    query.setInteger("parentid", Integer.parseInt(bigTypeId));
    List list = query.list();
    session.close();
    StringBuffer xmlSb = new StringBuffer("<smalltypes>");
    for (int i = 0; i < list.size(); i++) {
    TypeInfo typeInfo = (TypeInfo) list.get(i);
    xmlSb.append("<smalltype><typeid>" + typeInfo.getTypeId()
    + "</typeid><typename>" + typeInfo.getTypeName()
    + "</typename></smalltype>");
    }
    xmlSb.append("</smalltypes>");
    return xmlSb.toString();
    }
      

  17.   

    http://sourceforge.net/projects/xapps/       发现一个好的平台,推荐给大家,包括内容很多,比如:工作流,动态表单,....好强大 ,是JAVA编写的,是一个中国的开源工程,上去顶一下了.