jsp里的两个下拉框联动的问题！（100分在线等待）

当下拉框的value改变时，不是直接submit form啦，是让另一个下拉框出现对应的选项，
然后再根据这两个下拉框的值进行提交查询

看看这个:
http://expert.csdn.net/Expert/topic/723/723099.xml?temp=.8496515
可能对你有帮助.
good luck!
:)

演示：http://caoying.inows.com/bbs/best_tree.aspx
代码：http://expert.csdn.net/Expert/FAQ/FAQ_Index.asp?id=11939

以下是我用过的程序，你自己把连接数据库部分改改就完全可以使用了，贴出来供你参考：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<%@ page contentType="text/html; charset=gb2312" import="java.sql.*" %>
<%@ page language="java" import="java.util.*,javax.servlet.*,javax.servlet.jsp.*,javax.servlet.jsp.tagext.*,java.io.*,java.math.*,java.io.IOException" %>
<%@ page import="zx_beans.*" %>
<html>
<head> <title>留单综合查询</title></head>

<body bgcolor="D0D0D0" LeftMargin="0" topmargin="0">
<link REL="STYLESHEET" HREF="inc/style.css" TYPE="text/css">

<script language="javascript">



   //数据联动


   function addOption(Des,oText,oValue){
         var oOption = document.createElement("Option");
                 oOption.text=oText;
                 oOption.value=oValue;
                 document.all(Des).add(oOption);
           }



           function DelOption(Des){
         j=document.all(Des).length;
                 while(j>0){
                    document.all(Des).remove(j-1);
                    j--;
                 }
   }

           function change(parentstr,curstr){   //parentstr,curstr 父类子类
             if( document.all("sel_"+parentstr).value!=""){
             //子类
            DelOption("sel_"+curstr);
            str=document.all("hid_"+curstr).value ;
            var ss;
            ss=str.split("^");
            addOption("sel_"+curstr,"-请选择-","");
            for(i=0;i<ss.length;i++){
                       tmpstr=ss[i].split("~");
                       if (tmpstr[1]== document.all("sel_"+parentstr).value){
                           addOption("sel_"+curstr,tmpstr[2],tmpstr[0]);
                       }
                    }
       }
            }
   function sel_khlb_onchange(){     //客户类别的变动引起客户小类的变化
        change("khlb","khxl");

   }

</script>

<%



    DBService dbs=new DBService(SysConfig.DBYW );

    String strOptionkhlb="",strOptionkhxl="";
    String strOptionlb="",strOptionxl="",strOptionxm="",strOptionly="",strOptionqy="",strOptionjb="";

    String strHidkhxl="",strHidlb="",strHidxl="",strHidxm="";
    String tmpstr;
    try{

      String strCondition;
      DBResultset rs;


      //客户类别  cc_dictusertype
      strCondition="select intid,strname from cc_dictusertype where intstop=0 order by strname";
      rs=dbs.doQuery(strCondition);
      while(rs.moveNext() ){
         strOptionkhlb=strOptionkhlb+"<option value='"+rs.fieldByIndex(0)+"'>"+rs.fieldByIndex(1)+"</option>";
      }

      //客户小类  cc_dictusertype2
      strCondition="select intid,intparentid,strname from cc_dictusertype2 where intstop=0 order by strname";
      rs=dbs.doQuery(strCondition);
      while(rs.moveNext() ){
         tmpstr=rs.fieldByIndex(0)+"~"+rs.fieldByIndex(1)+"~"+rs.fieldByIndex(2);
         strHidkhxl=strHidkhxl+tmpstr+"^";
         strOptionkhxl=strOptionkhxl+"<option value='"+rs.fieldByIndex(0)+"'>"+rs.fieldByIndex(2)+"</option>";
      }


    }catch(Exception e){
      out.println(e.toString() +"<br>" ) ;
    }finally{
      dbs.closeConn() ;
    }

   %>

<table align="center" border="0" width="100%" height="5" cellspacing="0" cellpadding="0"><tr><td>
  <form name="inForm" method="POST" >
  <tr>
    <td width="100%" colspan="2" bgcolor="#C0DFF0" align="center"><Label class="H2">留单综合查询</Label>
    </td>
  </tr>

<table align="center" border="1" width="100%" bgcolor="#F5EFF8"  bordercolorlight="#F5F5F5"    cellspacing="0" bordercolordark="black" cellpadding="2">
         <tr>
<td>客户类别
<select id="sel_khlb" style="WIDTH: 100px" LANGUAGE=javascript onchange="return sel_khlb_onchange()">>
<option>-请选择-</option>
      <% out.println (strOptionkhlb);%>
        </select></td>

<td>客户小类
<select id="sel_khxl" style="WIDTH: 100px">
<option>-请选择-</option>
      <% //out.println (strOptionkhxl);%>
        </select></td>

        </tr>
        <tr>

        <input type="hidden" name="hid_khxl" value="<%out.println(strHidkhxl);%>">

</tr>

</table>

</form>

</table>

</body>

</html>

两个都是从数据库里读出来的
我现在不知道怎么把从数据库里取出来的值传到javascript里去处理？
因为两个下拉框都是从数据库里取值，一个A对应多个B，所以我觉得也应该作个二维数组，但得到的这个二维数组怎样把它传到javascript里去处理，各位帮忙教教我

如果你的数据不是很多，可以这么做，将A,B对应的表中需要的数据均取出来，拼成一个长串并将每项用特殊的符号做连接符。例如
于A对应的表为
列1     列2
1
2
3
B对应的是
列1    列2
1       a
1       c
2       d
3       a
2       a
3       e
1       f
在页面装入时
分别从A表和B表中取出所需数据并在每次循环中用特殊符号（如#,@;等）连接
（忽略了数据库的操作部分）
str1=1#2#3#;
str2=1#a;1#c;2#d;3#a;2#a;3#e;1#f;之后在JAVASCRIPT中将这些字符串付给javascript变量。
例如：
var listA="<%=str1%>";
var listB="<%=str2%>";
然后在javascript中使用SPLIT方法将listA和listB中的内容分割成一维数组
例如：
var arrayA=listA.split("#");
var arrayB=listB.split(";");
之后遍历整个arrayA,并把他加到下拉列表中
例如：
for(i=0;i<arrayA.length;i++)
{
   var objOption = document.createElement("Option");
   objOption.text=arrayA[i];
   oOption.value=arrayA[i];
   document.all(你的A select 标签的名称).add(objOption);
   document.all(你的A select 标签的名称).selectedIndex=0;
   dynamicList();
}之后用下列方法实现动态改变
function dynamicList()
{
  for(i=0;i<arrayB.length;i++)
  {
    var secondArrayB=arrayB.split("#");
    if(document.all(你的 A select 标签的名称).value==secondArrayB[0])
    {
      var objOption1 = document.createElement("Option");
      objOption1.text=secondArrayA[1];
      oOption1.value=secondArrayA[1];
      document.all(你的B select 标签的名称).add(objOption1);
     }
  }
}

To: oraclevbc(多多)你的str和temstr在哪里定义的，我在javascript和jsp里都没有看见str的定义，麻烦详细告诉一下啦
Thanks！

var Arr=new array();
Arr[0]=new Array("<%= rs.getString("module_name")%>","<%= rs.getString("system_id")%>","<%= rs.getString("module_id")%>");

String tmpstr;
定义在try{...}上面一行啊，你程序报什么错

要这么复杂嘛？看看http://www.soufun.com/
里面首页“城市”“区县”就是这样实现的。

<select name="strCity" style="width:60" onclick="javascript:sdistrict(document.formkc_mf.strDistrict,this.value)">
                      <option value="">城市</option>
                    </select>
                    <select name="strDistrict"  style="width:60">
                      <option value="">区县</option>
                    </select>javascriptfunction clear(o){
l=o.length;
for (i = 0; i < l; i ++){
o.options[0]=null;
}
}
omfcity=document.formkc_mf.strCity;
omfdistrict=document.formkc_mf.strDistrict;
ozfcity=document.formkc_zf.strCity;
ozfdistrict=document.formkc_zf.strDistrict;for (i=0;i<P.length;i++){
for (j=0;j<C[i].length;j++){
omfcity.add(new Option(C[i][j],C[i][j]));
ozfcity.add(new Option(C[i][j],C[i][j]));
}
}
function sdistrict(oj,v){
m=-1;
n=-1;
for (i=0;i<P.length;i++){
for (j=0;j<C[i].length;j++){
if (C[i][j]==v){
m=i;
n=j;
}
}
}
clear(oj);
if (m!=-1&&n!=-1){
for (i=0;i<D[m][n].length;i++){
oj.add(new Option(D[m][n][i],D[m][n][i]));
}
}
else{
oj.add(new Option("区县",""));
}}

调试易

jsp里的两个下拉框联动的问题！（100分在线等待）

解决方案 »