不刷新当前页面,而多个下拉框联动

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

一、初始化工作:
1.一个封装了数据查询的JavaBean(当前为SqlDispose)
2.数据库的结构(及数据)如下:
id          name       spec       model      place     
----------- ---------- ---------- ---------- ----------
1           电脑         IBM        台式机        1#
2           电脑         IBM        笔记本        1#
3           电脑         IBM        服务器        1#
4           电脑         联想       台式机        1#
5           电脑         联想       笔记本        1#
6           电脑         联想       服务器        1#
7           电脑         宏基       平板电脑     1#
8           机械         小松       挖掘机        1#
9           电脑         IBM        台式机        2#
当然,如上的数据库结构可以改成一对多关系的多个关(仅需要修改部分内容)。

二、两个关键文件(changeSelect.js,xml.jsp)
//changeSelect.js

/*--得到远程数据--*/
var oReq;
x = new ActiveXObject("Microsoft.XMLDOM");
function getRemoteData(field1,field2,option)
{
 var strA = "";
 oReq = new ActiveXObject("Microsoft.XMLHTTP");
 oReq.open("POST","xml.jsp?field1="+field1+"&field2="+field2+option,false);
 oReq.setRequestHeader("Content-Length",strA.length);
 oReq.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 oReq.send(strA);
}

/*--重画下拉框--*/
function changeSelect(select,source,target,option)

 getRemoteData(target,option,"&"+source+"="+select.options[select.selectedIndex].value);
 clearSelect(eval("form1."+target));
 fillSelect(eval("form1."+target));
}

/*--清空下拉框--*/
function clearSelect(select)
{
 select.options.length = 0;
 select.options[select.options.length]= new Option("--请选择--","");
}

/*--填充下拉框--*/
function fillSelect(select)
{
 x.loadXML(oReq.responseText);
 n=x.selectNodes("/root/id");
 if(n!=null)
 {  
  for(i=0;i<n.length;i++)
  {
   select.options[select.options.length]=new Option(n(i).text,n(i).text);
  }
 }
}

 

 

//xml.jsp
<%@ page import="java.sql.*"%>
<%@ page contentType="text/html;charset=GBK"%>
<jsp:useBean id="operate" scope="page" class="SqlDispose"/>


<root>
<%
ResultSet rs;
String sql;
String temp;
String field1,field2;
field1 = request.getParameter("field1");
field2 = request.getParameter("field2");

temp = new String(request.getParameter(field2).getBytes("ISO8859-1"),"GBK");
sql = "select "+field1+" from product where "+field2+"='"+temp+"' group by "+field1;
rs = operate.rs(sql);
while(rs.next())
{
 out.println("<id>"+rs.getString(1)+"</id>");
}
%>

</root>

 

三、演示文件(demo.jsp)
<%@ page import="java.sql.*" contentType="text/html;charset=GBK"%>
<jsp:useBean id="operate" scope="page" class="SqlDispose"/>

<head>
<script language="JavaScript" src="changeSelect.js"></script>
</head>
<form name="form1">
<select name="name" onchange="clearSelect(form1.model),clearSelect(form1.place),changeSelect(this,'name','spec','name')">
<option>--请选择--</option>

<%
ResultSet rs;
rs = operate.rs("select name from product group by name");
while(rs.next())
{
 out.print("<option value=");
 out.print(rs.getString("name")+">");
 out.print(rs.getString("name"));
 out.println("</option>");
}
%>
</select>
<select name="spec" onchange="clearSelect(form1.place),changeSelect(this,'spec','model','spec')"></select>
<select name="model" onchange=changeSelect(this,"model","place","model")></select>
<select name="place"></select>
</form>


四、最后说明
    以上提供了一个不刷新当前页,各个下拉框就可以联动,而且支持无限扩展(相对)。由于是GET方法传值,所以传值字符需要进行处理,
本文是在假定十分正常的条件下运行。由于HTTP的请求资料标识符的长度有限,所以当下拉框的个数受请求资料标识符的长度限制。如果数据
结构改用一对多的关系表,用ID传值,效果会有所好转。
    以上部分逻辑如果再进行封装,或者以标签的形式来运行,效果会更好。由于其不涉及到这里的内容,所以未加介绍。

 

 

 


 

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
个人分类: java
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭