类似级联菜单的功能实现

<s:select list="%{allSuperType}" name="type" listValue="typeName" listKey="id" onchange="F_super();">
</s:select>
<s:select list="%{allSubType}"  listValue="typeName"></s:select>
功能：两个下拦列表，第二个是的内容根据第一个的变化。类似级联菜单问题：经过action跳转后，第一个列表的选择值总是第一个值，即不可选，不经action跳转其值可选。
      具体如下:我在修择大类后有一个action跳转(跳转返回的是同一个页面)， 当选择IT数码后，小类会变，但经过
      action跳转后，又定位在了家居日用品上,我想经过跳转后还在我所选的项上(这里是IT数码),应如何处理
所属大类：家居日用品      所属小类:  洗发水  
          IT数码                     香皂
          美容化妆                    ..
           ....         
headkey headvalue能设置默认的值，当这里的值是要变的

解决方案 »

  1.   

    F_super()方法中把选中的项记下来 ，提交到Action 中我在修择大类后有一个action跳转时，再传到页面，并设置大类选项1.动态创建select      function createSelect(){       var mySelect = document.createElement("select"); 
              mySelect.id = "mySelect";  
              document.body.appendChild(mySelect);
          }2.添加选项option     function addOption(){          //根据id查找对象，
               var obj=document.getElementById('mySelect');           //添加一个选项
            obj.add(new      Option("文本","值"));    //这个只能在IE中有效
             obj.options.add(new Option("text","value")); //这个兼容IE与firefox
         }3.删除所有选项option     function removeAll(){
               var obj=document.getElementById('mySelect');
      
            obj.options.length=0;       }4.删除一个选项optionfunction removeOne(){
               var obj=document.getElementById('mySelect');           //index,要删除选项的序号，这里取当前选中选项的序号        var index=obj.selectedIndex;
            obj.options.remove(index);  
         }5.获得选项option的值var obj=document.getElementById('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index].value;6.获得选项option的文本var obj=document.getElementById('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index].text;7.修改选项optionvar obj=document.getElementById('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index]=new Option("新文本","新值");
    --------------------------------------------ajax技术
      

  2.   

    用dwr做吧！[code=BatchFile]
    select标签的一些用法1：a.DWR实现下拉框的三级级联/b.年月的赋值
    2009年01月05日 星期一 上午 11:24
    <%@ page contentType="text/html; charset=GBK"%>
    <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
    <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
    <%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
    <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
    <%@ taglib uri="/web-inf/eoffice-utils.tld" prefix="eoffice"%>
    <%
    String baseUrl = request.getContextPath();
    %>
    <!doctype html public "-//w3c//dtd html 4.01 transitional//en">
    <html>
    <head>
    <title>大气环境监测年统计</title>
    <html:base />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <%--<link rel=stylesheet href="<%=baseUrl %>/style/FlowMainFormBasicCSS.css"
       type=text/css media="screen" />
    <link rel=stylesheet href="<%=baseUrl %>/style/common.css" type=text/css
       rel=stylesheet media="screen" />
    --%>
    <SCRIPT language=JavaScript src="<%=baseUrl%>/js/Calendar.js"></SCRIPT>
    <script type='text/javascript' src="<%=baseUrl%>/dwrapp/interface/hjhbDwrService.js"></script>
    <script type='text/javascript' src="<%=baseUrl%>/dwrapp/engine.js"></script>
    <script type='text/javascript' src="<%=baseUrl%>/dwrapp/util.js"></script>
    <script type="text/javascript" src="<%=baseUrl %>/js/check.js"></script>
    <link rel=stylesheet href="../style/common.css" type=text/css>
    <script type="text/javascript">  
            
         
       function checkForm(){
              // var jclxmc = document.getElementById("jclxmc").value;
              var jcqymc = document.getElementById("jcqymc").value;
              var qyd = document.getElementById("qyd").value;
         var year=document.getElementById("value(year)").value;
       
                    //if(jclxmc == "-1") {
         // alert("请选择统计类型!");
         // return false;
         //}
         if(jcqymc == "-1") {
          alert("请选择区域!");
          return false;
         }
         if(qyd == "-1") {
          alert("请选择取样点!");
          return false;
         }
         if(year == "") {
          alert("请选择年份!");
          document.getElementById("value(year)").focus();
          return false;
         }
        
         return true;
       }
       //下拉框的三级级联
       // 第一级下拉框
    //获取 监测类型
       function getAllJclx(){
        hjhbDwrService.getJclx({
          callback:function(data){
            DWRUtil.addOptions("jclxmc",data,"id","tymc");
          }
        });
       }
    // 第二级下拉框
       // 通过监测类型ID，获取相应区域名称
       function getQymc(){    
        var jclxid = document.getElementById("value(jclxmc)").value;   
        hjhbDwrService.getJcqy(jclxid,{
          callback:function(data){
            DWRUtil.addOptions("jcqymc",data,"szqy","szqy");        
          }
        });
       }
    // 第三级下拉框
       // 通过监测类型id和区域名称 获取对应的取样点
       function getQydAndJcxm(){
        var jclxid = document.getElementById("value(jclxmc)").value; 
        var jcqymc = document.getElementById("value(jcqymc)").value; 
       
        hjhbDwrService.getQyd(jclxid,jcqymc,{
          callback:function(data){
             DWRUtil.addOptions("qyd",data,"tymc","tymc");
          }
        });
       }
       // 绑定类型的中文名称
       function setJclxmcText(){
         绑定区域
         getQymc();
         document.getElementById("jclxmctext").value = document.getElementById("jclxmc").options[document.getElementById("jclxmc").selectedIndex].text;
        
       }
       //执行ACTION
       function sendSjbb() {
        document.forms[0].action = "<%=request.getContextPath() %>/app/hjhb/dqjcnbbAction.do";
        if(checkForm()) {
         document.forms[0].submit();
        }
       }
      
       function init(){
        // 初始化统计类型
        getAllJclx();
         // b.年月下拉框的赋值,初始化年月
        var date = new Date();
        thisYear = date.getYear();
        var yearObj = document.getElementById("value(year)");
        var monthObj1 = document.getElementById("value(month1)");
        var monthObj2 = document.getElementById("value(month2)");
        
        // 绑定年份
        for(var i = 2000;i<=2030;i++)
        {
          var yOption = document.createElement("OPTION");
        yearObj.options.add(yOption);
        yOption.innerText = i;
        yOption.value = i;   
        }
        // 设置当前年份为默认
       for(var k=0;k<yearObj.length;k++){
          if(thisYear == yearObj.options[k].value){
        yearObj.options[k].selected = "selected";
          }
        } 
        
       // 绑定月份1
        for(var j = 1;j<=12;j++) {
        var mOption = document.createElement("OPTION");
        monthObj1.options.add(mOption);
        mOption.innerText ='--';
        mOption.value ='';
        if(j<10){
         mOption.innerText ='0'+j;
         mOption.value ='0'+ j;
        }else{
           mOption.innerText = j;
         mOption.value = j;
        }
        }  
        // 绑定月份2
        for(var j = 1;j<=12;j++) {
        var mOption = document.createElement("OPTION");
        monthObj2.options.add(mOption);
        mOption.innerText ='--';
        mOption.value ='';
        if(j<10){
         mOption.innerText ='0'+j;
         mOption.value ='0'+ j;
        }else{
           mOption.innerText = j;
         mOption.value = j;
        }
        }       
       }  
      
    </script>
    </head>
    <body onload="init();">
    <table width=100% border=0 align="center" cellpadding=0 cellspacing=0>
    <tbody>
         <tr align=center height=21>
        <td>&nbsp;</td>
       </tr> 
       <tr align=center height=21>
        <td>环境监测年统计</td>
       </tr>
       <tr valign=top align=center height=20>
        <td>
           <hr>
        </td>
       </tr>
    </tbody>
    </table>
    <html:form action="/app/gkmyd/gkmyddcAction" method="post" onsubmit="return checkForm();" target="new">
       
    <table align="center" width="90%">
       <tr>     
          <td ><div align="right">选择年份：</div></td>
             <td><select name="value(year)"></select><font color="red">*</font>
                 <select name="value(month1)"></select>月-
                 <select name="value(month2)"></select>月
             </td> 
              
        <td><div align="right">统计类型：</div></td>
        <td>
          <html:text name="commonForm" property="value(jclxmctext)" styleId="jclxmctext" readonly="true"/><font color="red">*</font> <html:hidden name="commonForm" property="value(jclxmc)" styleId="jclxmc" />      
        </td>
          </tr>
          <tr>  
        <td align="right">选择区域：</td>
        <td>
          <html:select name="commonForm" property="value(jcqymc)" styleId="jcqymc" onchange="getQydAndJcxm();">
             <html:option value="-1">---请选择---</html:option>
                </html:select><font color="red">*</font>
        </td>
        <td align="right">选择取样点：</td>
        <td>
          <html:select name="commonForm" property="value(qyd)" styleId="qyd">
             <html:option value="-1">---请选择---</html:option>
                </html:select><font color="red">*</font>
        </td>   
             
           </tr> 
       <tr>
        <td colspan="6">&nbsp;</td>
       </tr>   
       <tr>
        <td colspan="6">&nbsp;</td>
       </tr>
       <tr>
        <td colspan="6" align="center">
           <html:button property="" value="生成年报表" onclick="sendSjbb();" />
        </td>
       </tr>
    </table>
    </html:form>
    </body>
    </html>[/code]
      

  3.   

    我的资源里有个 AJAX 写的 jsp 下拉条级联 源码，楼主去看看，参考下
      

  4.   

         action跳转后，又定位在了家居日用品上,我想经过跳转后还在我所选的项上(这里是IT数码),应如何处理 你把IT数码的ID值传回来 显示IT数码 不就OK了
      

  5.   

    先感谢大家的不吝赐教嘿，4楼和我想的一样，不过我不知道在<s:select>标签中如何将值定位，然后再接收回来，希望给出实现代码，不要太多了嘿，1楼的代码有点烦琐，不是说不好嘿，只是本人感觉应该可以简单实现的，还是很感谢1楼的答复的
      

  6.   

    嘿嘿~~做出来了，我把list改成了map，<s:select>标签中有value，指定这个属性传值就可以了，就多了一两条语句