Jsp中使用select的联动

来源:互联网 发布:护眼眼镜 知乎 编辑:程序博客网 时间:2024/06/06 04:11

问题:

a表
Code               Name
0001               公司1
0002               公司2
b表
MainCode             SubCode               SubName
0001                       1001                       部门1
0001                       1002                       部门2
0002                       2001                       部门3
0002                       2002                       部门4

2个select。第一个select如果选择公司1,那么第二个select就是和它主代码相同的部门1,部门2
类似于,很多注册网站中如果一个select选择“山东”,另一个就是山东的所有地市。如果选择“山西”。另一个就动态的是山西的所有地市。

解决方法1:

<script   language   =   "JavaScript ">
var   onecount;
onecount=0;
subcat   =   new   Array();
<%
int   count   =   0;
java.sql.ResultSet   rs1   =   DBManage.executeQuery( "select   hydm,zhydm,zhymc   from   zhy   ");//读取数据
while(rs1.next())
{
String   selhydm=rs1.getString( "hydm ").trim();
String   zhydm=rs1.getString( "zhydm ").trim();
String   zhymc=rs1.getString( "zhymc ").trim();  
%>
subcat[ <%=count%> ]   =   new   Array( " <%=zhydm%> ", " <%=selhydm%> ", " <%=zhymc%> ");//产生数组
<%
count   =   count   +   1;
}
if(rs1!=null)   DBManage.closeCOnn();
%>
onecount= <%=count%> ;
function   changelocation(id)
{
document.form1.selzhy.length   =   0;  
var   hydm=id;
var   i;
document.form1.selzhy.options[0]   =   new   Option( '选择子行业分类 ', ' ');
for   (i=0;i   <   onecount;   i++)
{
if   (subcat[i][1]   ==   hydm)
{  
document.form1.selzhy.options[document.form1.selzhy.length]   =   new   Option(subcat[i][2],   subcat[i][0]);
}                
}
}  
</script>
<table   width= "500 "     border= "0 "   cellspacing= "0 "   cellpadding= "0 "   align= "center ">
<tr>
<td   width= "180 "   height= "20 "   align= "right "> 选择行业分类: </td>
<td   width= "320 ">
<select   name= "selhy "   onChange= "changelocation(document.form1.selhy.options[document.form1.selhy.selectedIndex].value) "   size= "1 "   >
<option   value= "2 "> 请选择行业分类 </option>
<%
rs   =   DBManage.executeQuery( "select   *   from   hy ");
while(rs.next())
{
        String   hydm=rs.getString( "hydm ").trim();
        String   hymc=rs.getString( "hymc ").trim();
%>
<option   value= " <%=hydm%> "> <%=hymc%> </option>
<%
}
if(rs!=null)   DBManage.closeCOnn();
%>
</select>
</td>
</tr>
<tr>
<td   height= "20 "   align= "right "> 选择子行业分类: </td>
<td>
<select   name= "selzhy "   >
<option   value= " "   selected> 请选择子行业分类 </option>
</select>  
</td>
</tr>
</table>

解决方法2:

<form     name=form1>    
<select     name=province     onchange= "cityName(this.selectedIndex) ">    
      <option     value= " "> 请选择省名 </option>    
</select>    
 
<select     name=city>    
      <option     value= " "> 请选择城名 </option>    
</select>    
</form>    
 
<script     language=javascript>    
 
var     city1     =     [ "杭州 ",     "宁波 ",     "温州 ",     "绍兴 ",     "金华 ",     "湖州 "];    
var     city2     =     [ "南京 ",     "苏州 ",     "无锡 ",     "常州 ",     "镇江 ",     "徐州 "];    
var     city3     =     [ "合肥 ",     "翕县 ",     "黄山 ",     "祁门 ",     "休宁 "];    
var     city4     =     [ "南昌 ",     "九江 ",     "赣州 ",     "上饶 ",     "新余 ",     "景德镇 "];        
var     provinceName     =     [ "浙江 ",     "江苏 ",     "安徽 ",     "江西 "];    
 
 
function     province()    
{    
 
              var     e     =     document.form1.province;    
              for     (var     i=0;     i <provinceName.length;     i++)    
                          e.options.add(new     Option(provinceName[i],     provinceName[i]));    
}    
function     cityName(n)    
{    
              var     e     =     document.form1.city;    
              for     (var     i=e.options.length;     i> 0;     i--)         e.remove(i);    
              if     (n     ==     0)     return;    
              var     a     =     eval( "city "+     n);     //得到城市的数组名    
              for     (var     i=0;     i <a.length;     i++)     e.options.add(new     Option(a[i],     a[i]));    
}    
function     window.onload()    
{    
              province();     //初始时给省名下拉菜单赋内容    
}    
</script>

总结:

静态的实现,可以利用javascript的级联select,这里有个很好的封装类与示例:http://www.mattkruse.com/javascript/dynamicoptionlist/;还有这里,另一个示例:http://www.chinabs.net/js/listdropdownmenu.asp
动态的实现,可以利用XML到后台去动态的取值,网上也可以搜到相应的例子;

后者主要是为了解决数据量较大的情况下Load时间过慢的问题。根据当前的需求,前者应该就可以满足要求了。