在一个jsp页面实现二级下拉框联动，实时读取数据库数据

在一个jsp页面实现二级下拉框联动，实时读取数据库数据，这个方法非常使用，只需要修改很小的地方就可以使用。设计的文件，serch.jsp，main.js，bytetostr.js，

先讲一下main.js，这是javascript，其中注意修改jsp页面名称。

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_37_322_Open_Image" style="WIDTH: 8.25pt; HEIGHT: 12pt" alt="" type="#_x0000_t75" o:spid="_x0000_i1025"><imagedata o:href="https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif" src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msoclip1/01/clip_image001.gif"></imagedata></shape><shape id="_37_322_Closed_Image" style="WIDTH: 8.25pt; HEIGHT: 12pt" alt="" type="#_x0000_t75" o:spid="_x0000_i1026"><imagedata o:href="https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif" src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msoclip1/01/clip_image002.gif"></imagedata></shape>functionfindObject(fName,initValue)...{
<shape id="_x0000_i1027" style="WIDTH: 8.25pt; HEIGHT: 12pt" alt="" type="#_x0000_t75"><imagedata o:href="https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif" src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msoclip1/01/clip_image003.gif"></imagedata></shape>varxmlhttp=newActiveXObject("Microsoft.XMLHTTP");
<shape id="_x0000_i1028" style="WIDTH: 8.25pt; HEIGHT: 12pt" alt="" type="#_x0000_t75"><imagedata o:href="https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif" src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msoclip1/01/clip_image003.gif"></imagedata></shape>xmlhttp.open("POST","searchmx.jsp?findObject="+fName+"&initValue="+initValue,false);//注意修改jsp页面
<shape id="_x0000_i1029" style="WIDTH: 8.25pt; HEIGHT: 12pt" alt="" type="#_x0000_t75"><imagedata o:href="https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif" src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msoclip1/01/clip_image003.gif"></imagedata></shape>xmlhttp.send();
<shape id="_x0000_i1030" style="WIDTH: 8.25pt; HEIGHT: 12pt" alt="" type="#_x0000_t75"><imagedata o:href="https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif" src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msoclip1/01/clip_image003.gif"></imagedata></shape>document.getElementById(fName).innerHTML=bytes2BSTR(xmlhttp.responsebody);//bytes2BSTR函数在bytetostr.js中
<shape id="_x0000_i1031" style="WIDTH: 8.25pt; HEIGHT: 12pt" alt="" type="#_x0000_t75"><imagedata o:href="https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif" src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msoclip1/01/clip_image004.gif"></imagedata></shape>}

其次为bytetostr.js，这是vbscript，这个不需要修改任何内容，他的主要功能就是读取数据转换字符串用的。

Function bytes2BSTR(vIn)
dim i
strReturn = ""
For i = 1 To LenB(vIn)
ThisCharCode = AscB(MidB(vIn,i, 1 ))
If ThisCharCode < & H80 Then
strReturn = strReturn & Chr (ThisCharCode)
Else
NextCharCode = AscB(MidB(vIn,i + 1 , 1 ))
strReturn = strReturn & Chr ( CLng (ThisCharCode) * & H100 + CInt (NextCharCode))
i = i + 1
End If
Next
bytes2BSTR = strReturn
EndFunction

接下来就是serch.jsp页面，只需要修改div中的id为你想要的名字，再将一开始的包更换一下，已经sql语句改下就可以了，有不明白的可以参与讨论

<% @pagecontentType = " text/html;charset=gb2312 " language = " java " import = " com.sjth.zdsygl.vo.*,com.sjth.zdsygl.biz.*,java.util.*,com.sjth.zdsygl.jdbc.*,java.sql.ResultSet " %> // 导入相应的包
<%
// 这部分代码用于执行查询数据库，返回字符串
if (request.getParameter( " findObject " ) != null ) ... {
if(request.getParameter("findObject").equals("hy_dm"))...{
DBConnectconn=null;
ResultSetrs=null;
try...{
out.print("<selectname='hy_dm'οnchange="javascript:findObject('hymx_dm',this.value)">");
Stringsql="select*fromdm_hygroupbyleft(hy_dm,7)";
conn=newDBConnect();
conn.setPstmt(sql);
rs=conn.executeQuery(sql);
while(rs.next())...{
out.print("<optionvalue='"+rs.getString("hy_dm")+"'>"+rs.getString("hy_mc")+"</option>");
}
out.print("</select>");
}
catch(Exceptione)...{
}
finally...{
try...{
if(rs!=null)
rs.close();
if(conn!=null)
conn.close();
}
catch(Exceptione)...{
e.printStackTrace();
}
}
}
if(request.getParameter("findObject").equals("hymx_dm"))...{
DBConnectconn=null;
ResultSetrs=null;
try...{
out.print("<selectname='hymx_dm'>");
Stringsql=null;
if(request.getParameter("initValue").equals(""))...{
sql="select*fromdm_hy";
}
else...{
sql="select*fromdm_hywherehy_dmlike'"+request.getParameter("initValue")+"%'";
}
conn=newDBConnect();
conn.setPstmt(sql);
rs=conn.executeQuery(sql);
while(rs.next())...{
out.print("<optionvalue='"+rs.getString("hy_dm")+"'>"+rs.getString("hy_mc")+"</option>");
}
out.print("</select>");
}
catch(Exceptione)...{
}
finally...{
try...{
if(rs!=null)
rs.close();
if(conn!=null)
conn.close();
}
catch(Exceptione)...{
e.printStackTrace();
}
}
}
return;
}
%>
< html >
< head >
< linkhref = " css/table.css " type = " text/css " rel = " stylesheet " >
< scriptlanguage = vbscriptsrc = " css/bytetostr.js " ></ script >
< scriptlanguage = javascriptsrc = " css/main.js " ></ script > // 导入两个js文件
</ head >
< body >
< div > 所属行业： </ div >
< divid = " hy_dm " ></ div > // 用来显示返回的字符串
< div > 所属明细行业： </ div >
< divid = " hymx_dm " ></ div > // 用来显示返回的字符串
</ body >
</ html >
< scriptlanguage = " javascript " >
findObject( " hy_dm " , "" );
findObject( " hymx_dm " , "" ); // 这两条是页面执行是调用
</ script >

欢迎大家讨论