JS级联问题

hailun 2006-09-27 09:57:19

下面为一产品管理后台的添加项
添加大小类
请选择大类请选择小类
a aa aaa
b bb bbb
c cc ccc
如果是这样
第一次的时候选a 小类会自动显示aa,aaa,再选b的时候小类也会显示bb bbb,C也一样,然后我再"选回"
"请选择大类"的时候,那么小类显示的刚才选择的那个小类(也就是会选择最后一次选择的那个小类)
麻烦帮忙改一下谢谢
代码很长,其实就是JS那一块和SELECT那一块这二部分

<%@ page contentType="text/html; charset=GBK" import="java.sql.*,website1.common.*,website1.db.*,website1.bean.*,java.util.*"%>
<% /*此为产品分类数据库部分*/
Connection conn=DBConnection.getConnection();
ResultSet rs=null;
ArrayList PcAl=null;
productclassBean pcb=null;
PreparedStatement pst=null;
try{
pst=conn.prepareStatement("select * from productclass ");
rs=pst.executeQuery();
PcAl=new ArrayList();
while(rs.next()){
pcb=new productclassBean();
pcb.setId(rs.getString("id"));
pcb.setClassname(rs.getString("classname"));
pcb.setPid(rs.getString("pid"));
pcb.setContext(rs.getString("context"));
pcb.setCreatetime(rs.getString("createtime"));
PcAl.add(pcb);
}
}catch(Exception ex){
ex.printStackTrace();
}finally{
rs.close();
pst.close();
conn.close();
}
%>
<script language = "JavaScript">
var onecount;
subcat = new Array();
<%
int count = 0;
for(;count<PcAl.size();count++){
pcb=(productclassBean)PcAl.get(count);
%>
subcat[<%=count%>] = new Array("<%=pcb.getId()%>","<%=pcb.getClassname().trim()%>","<%=pcb.getPid()%>");
<%
}
%>
onecount=<%=count%>;

function changelocation(locationid)
{
document.searchform.smallclass.length = 1;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == locationid)
{
document.searchform.smallclass.options[document.searchform.smallclass.length] = new Option(subcat[i][1], subcat[i][0]);
}
}
}
</script>
<html>
<link href="image/southidc.css" rel="stylesheet" type="text/css">
<body>
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
</table>
<table width="80%" height="0%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td valign="middle"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#97B5D2">
<tr>
<td><table width="100%" height="28" border="0" cellpadding="0" cellspacing="0" background="Image/titlebg.gif" bgcolor="#FFFFFF">
<tr>
<td align="center">添加产品</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#D6E7F8">
<tr>
<td width="100%"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="center" valign="top">
<form action="product_madd_p.jsp" method="POST" name="searchform" target="_self" id="searchform" onSubmit="return CheckForm();">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="border">
<tr>
<td height="20" align="center" class="title"></td>
</tr>
<tr align="center">
<td class="tdbg"><table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="155" height="22" align="right"><font color="#FF0000">*</font>所属类别：</td>
<td width="124" height=28><p>
<select name="bigclass" onChange="changelocation(document.searchform.bigclass.options[document.searchform.bigclass.selectedIndex].value)">
<option value="0">所有大类</option>
<%for(int i=0;i<PcAl.size();i++){
pcb=(productclassBean)PcAl.get(i);
if(pcb.getPid().equals("0")){
%>
<option value="<%=pcb.getId()%>"><%=pcb.getClassname()%></option>
<%}}%>
</select>
</p>
<td width="328"><select name="smallclass" id="smallclass">
<option value="0" selected>所有小类</option>
</select>
</tr>
<tr>
<td width="155" height="22" align="right"><font color="#FF0000">*</font>产品名称：</td>
<td colspan="2"><input name="title" type="text" id="Title2" size="50" maxlength="80"> </td>
</tr>
<tr>
<td align="right" valign="middle"><div align="right">
<textarea name="Content" style="display:none" rows="1" cols="20"></textarea>
录入时间： </div></td>
<%java.util.Date date=new java.util.Date();%>
<td colspan="2" align="right" valign="middle"><div align="left"><%=date.toLocaleString().substring(0,10)%></div></td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>产品说明：</td>
<td height="96" colspan="2"><textarea name="context" cols="65" rows="10" id="context" height="96"></textarea></td>
</tr>
<tr>
<td width="155" height="22" align="right" valign="bottom"><br>
<font color="#FF0000">*</font>产品图片：<br></td>
<td colspan="2"><iframe id="upload" src="upload.jsp?data=product&id=3&style=add" frameborder="0" height="40" scrolling="no" ></iframe></td>
</tr>
</table></td>
</tr>

</table>
<div align="center">
<p><input name="Add" type="submit" id="Add" value="添加" onClick="">
<input type="reset" name="Submit" value="重置">
</p>
</div>
</form></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</html>

...全文

537 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

yeno 2006-09-28

打赏
举报

这一段是级联的JS代码

/**输出省下面的地区*/
function selectChangeArea(ObjName,DesName,flag)
{
var j=0;
//alert(ObjName.value.length+"==="+ObjName.name);
DesName.options.length=0;
if (ObjName.value.length!=0)
{
var CatValue=ObjName.value.substr(0,2);
//alert(CatValue);
//with(document)
//{
for(var i=0;i<areaCount;i++)
{
var areaNo=jobArea[i][0];
var areaNm=jobArea[i][1]; //.replace("－不限","");

if (areaNo.substr(0,2)==CatValue)
{
if(areaNo.substr(2,2)=="00")
DesName.options[j]= new Option(areaNm+"-不限",areaNo);
else
DesName.options[j]= new Option("├-"+areaNm,areaNo);
j++;
}

}
//}
}
else
{
DesName.length=0;
var areaNo="";
var areaNm="不限";
DesName.options[j]= new Option(areaNm,areaNo);
}
}

用法如下：
<select name="lflddomicile" onchange="JavaScript:selectChangeArea(f1.lflddomicile,f1.lflddomicile2)">
<script>writeBigAreaOpt();</script>
</select> 省(直辖市)
<select name="lflddomicile2">
<script>writeSmallAreaOpt();</script>
</select> 市(区、县)

其中f1是Form表单的名称

闭门车 2006-09-28

打赏
举报

imA 2006-09-27

打赏
举报

那你想要什么样的？
就是当选回大类的请选择，小类也返回请选择？那样就把function改为：
function changelocation(locationid)
{
var locationid=locationid;
var smallclass=document.searchform.smallclass;
for (i=0;i < 3; i++)
{
if (subcat[i][0] == locationid)
{
smallclass.length=0;
var op1=document.createElement("option");
var op2=document.createElement("option");
op1.text=subcat[i][1];
op1.value=subcat[i][1];
op2.text=subcat[i][2];
op2.value=subcat[i][2];
smallclass.add(op1);
smallclass.add(op2);
}
}
if(locationid=="0")
{
smallclass.length=0;
var op=document.createElement("option");
op.text="所有小类";
op.value="0";
smallclass.add(op);
}
}

hailun 2006-09-27

打赏
举报

首先谢谢楼上的回复
你的这个也是如果再选回大类的时候小类里的也还是最后一次选择的类
你可以自己试一下的

imA 2006-09-27

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
subcat = new Array();
subcat[0]=new Array("a","aa","aaa");
subcat[1]=new Array("b","bb","bbb");
subcat[2]=new Array("c","cc","ccc");

function changelocation(locationid)
{
var locationid=locationid;
var i;
for (i=0;i < 3; i++)
{
if (subcat[i][0] == locationid)
{
var smallclass=document.searchform.smallclass;
smallclass.length=0;
var op1=document.createElement("option");
var op2=document.createElement("option");
op1.text=subcat[i][1];
op1.value=subcat[i][1];
op2.text=subcat[i][2];
op2.value=subcat[i][2];
smallclass.add(op1);
smallclass.add(op2);
}
}
}
</script>
</HEAD>

<BODY>
<form action="product_madd_p.jsp" method="POST" name="searchform" target="_self" id="searchform" onSubmit="return CheckForm();">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="border">
<tr>
<td height="20" align="center" class="title"></td>
</tr>
<tr align="center">
<td class="tdbg"><table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="155" height="22" align="right"><font color="#FF0000">*</font>所属类别：</td>
<td width="124" height=28><p>
<select name="bigclass" onChange="changelocation(document.searchform.bigclass.options[document.searchform.bigclass.selectedIndex].value)">
<option value="0">所有大类</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</p>
<td width="328"><select name="smallclass" id="smallclass">
<option value="0" selected>所有小类</option>
</select>
</tr>
</table>
</form>
</BODY>
</HTML>

把上面的代码保存成一个html文件，然后用IE打开，看看是不是你要的效果，如果是就把其中的
相应代码添加到你的文件中

lip009 2006-09-27

打赏
举报

http://blog.csdn.net/lip009/archive/2006/09/11/1208343.aspx
关于下拉联动,请看这篇总结!有原代码

hailun 2006-09-27

打赏
举报

哈哈还是谢谢你啊
解决不出来了呀
再等等

imA 2006-09-27

打赏
举报

有问题自己解决去吧，我技穷了，对不起。

hailun 2006-09-27

打赏
举报

楼上的你可以自己试试啊是真的有问题的
我也不至于笨到不是不在你的基础上改的呀

imA 2006-09-27

打赏
举报

我靠，楼主你到底会不会看js代码啊？你说的要求可以在我的代码基础上加啊。
把function改为：
function changelocation(locationid)
{
var locationid=locationid;
var smallclass=document.searchform.smallclass;
for (i=0;i < 3; i++)
{
if (subcat[i][0] == locationid)
{
smallclass.length=0;
var op=document.createElement("option");
var op1=document.createElement("option");
var op2=document.createElement("option");
op.text="所有小类";
op.value="0";
op1.text=subcat[i][1];
op1.value=subcat[i][1];
op2.text=subcat[i][2];
op2.value=subcat[i][2];
smallclass.add(op);
smallclass.add(op1);
smallclass.add(op2);
}
}
if(locationid=="0")
{
smallclass.length=0;
var op=document.createElement("option");
op.text="所有小类";
op.value="0";
smallclass.add(op);
}
}

这是最后一次，其他什么要求，自己看js代码，然后在那基础上改，不要太懒！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

lip009 2006-09-27