jsp的代码：
设备类别：<select name="leibie1" id="leibie1" onclick="getnumber()">
<%
dataDao dd1=new dataDao();
ArrayList<Device> list1=dd1.alldevice();
Device dv1=new Device();
for(int i=1;i<=dd1.getDevice();i++){
dv1=list.get(i-1);%>
<option value=<%=dv1.getDname()%>><%=dv1.getDname()%></option><%
}
%>
</select><br>
设备通讯地址：<select name="cong1" id="cong1">
<%
dataDao dd2=new dataDao();
ArrayList<UserMessage> umal=dd2.getUserMessage("1");//1为leibie1的值
UserMessage um=new UserMessage();
for(int i=1;i<=umal.size();i++){
um=umal.get(i-1);%>
<option value=<%=um.getNumber()%>><%=um.getNumber()%></option><%
}
%>
目的：
使"设备类别"和"设备通讯地址"级联操作，即单击设备类别，显示相应的设备通讯地址，设备通讯地址是根据leibie1的值来获得的
要求：
用ajax实现，我用的是mysql数据库，要求局部刷新
设备类别：<select name="leibie1" id="leibie1" onclick="getnumber()">
<%
dataDao dd1=new dataDao();
ArrayList<Device> list1=dd1.alldevice();
Device dv1=new Device();
for(int i=1;i<=dd1.getDevice();i++){
dv1=list.get(i-1);%>
<option value=<%=dv1.getDname()%>><%=dv1.getDname()%></option><%
}
%>
</select><br>
设备通讯地址：<select name="cong1" id="cong1">
<%
dataDao dd2=new dataDao();
ArrayList<UserMessage> umal=dd2.getUserMessage("1");//1为leibie1的值
UserMessage um=new UserMessage();
for(int i=1;i<=umal.size();i++){
um=umal.get(i-1);%>
<option value=<%=um.getNumber()%>><%=um.getNumber()%></option><%
}
%>
目的：
使"设备类别"和"设备通讯地址"级联操作，即单击设备类别，显示相应的设备通讯地址，设备通讯地址是根据leibie1的值来获得的
要求：
用ajax实现，我用的是mysql数据库，要求局部刷新
<script type="text/javascript" src="../dwr/engine.js"> </script>
<script type="text/javascript" src="../dwr/util.js"> </script>
<script type="text/javascript" src="../dwr/interface/admin.js"> </script>
<script type="text/javascript" language="javascript">
///根据设备类别,选择设备通讯地址
function selectAddress() /**设备类别onchange事件的入口**/
{
var selDept = document.getElementById("selDept"); /**获得设备类别的select对象**/
var temp = selDept.selectedIndex;
var dept_no = selDept.options[temp].value; /**得到选择的设备类别的编号**/
if(dept_no != 0)
{
admin.getAddress(dept_no,okAddress); /**这里是dwr异步的调用，把设备类别编号传进去，查询出设备通讯的实体信息，dwr需要在配置文件里面配置一下，admin对应dwr配置文件里的动态js，getAddress是配置文件里对应提交类的方法，既查询方法**/
}
else
{
return;
}
}
function okAddress(data) /**这就是dwr异步的回调函数,返回的data是个List装的设备通讯地址的实体信息**/
{
var selAddress = document.getElementById("selAddress"); /**获得页面上设备通讯的select对象，下面动态装入就OK了**/
selAddress.innerHTML = "";
selAddress.options.add(new Option("----请选择员工----",0));
for(var i=0;i<data.length;i++)
{
selAddress.options.add(new Option(data[i].address_name,data[i].address_no));
}
}
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type='text/javascript' src='/aaa/dwr/interface/add.js'>
</script>
<script type='text/javascript' src='/aaa/dwr/engine.js'>
</script>
<script type='text/javascript' src='/aaa/dwr/util.js'>
</script><script language="javascript"
src="<%=request.getContextPath()%>/jquery-1.3.2.js"></script>
<script type="text/javascript">
function getList(s){
add.add(s, function(list){
var option = "";
if(null != list){
$.each(list, function(i){ // 遍历返回的list
option += "<option value=''"+list[i]+"''>" + list[i]+"</option>";
});
}
$("#list option").remove(); // 添加时先将之前的删掉
$("#list").append(option); // 添加
});
}
</script> </head> <body> <select onchange="getList(this.value)" style="width: 90px">
<option value="1">小写</option>
<option value="2">大写</option>
</select> <select id="list" style="width: 90px"> </select> </body>
</html>
package com;import java.util.ArrayList;
import java.util.List;public class AddList { public List add(String s){
List list = new ArrayList();
if("1".equals(s)){
list.add("aaa");
list.add("bbb");
list.add("ccc");
list.add("ddd");
} else {
list.add("AAA");
list.add("BBB");
list.add("CCC");
list.add("DDD");
}
return list;
}
}
刚试过的,list自己查找数据库里咯,
俺用JQuery 做的,
JS方面应该还蛮好的,呵呵,
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type='text/javascript' src='/aaa/dwr/interface/add.js'>
</script>
<script type='text/javascript' src='/aaa/dwr/engine.js'>
</script>
<script type='text/javascript' src='/aaa/dwr/util.js'>
</script><script language="javascript"
src="<%=request.getContextPath()%>/jquery-1.3.2.js"></script>
<script type="text/javascript">
function getList(s){
add.add(s, function(list){
var option = "";
if(null != list){
$.each(list, function(i){ // 遍历返回的list
option += "<option value=''"+list[i]+"''>" + list[i]+"</option>";
});
}
$("#list option").remove(); // 添加时先将之前的删掉
$("#list").append(option); // 添加
});
}
</script> </head> <body> <select onchange="getList(this.value)" style="width: 90px">
<option value="1">小写</option>
<option value="2">大写</option>
</select> <select id="list" style="width: 90px"> </select> </body>
</html>
后台java类
package com;import java.util.ArrayList;
import java.util.List;public class AddList { public List add(String s){
List list = new ArrayList();
if("1".equals(s)){
list.add("aaa");
list.add("bbb");
list.add("ccc");
list.add("ddd");
} else {
list.add("AAA");
list.add("BBB");
list.add("CCC");
list.add("DDD");
}
return list;
}
}
试试效果,难怪人家比我的好看
jsp代码如下：
<script type='text/javascript' src='/dwr/interface/dwrgetnumber.js'></script> <!-- 这个将会自动生成,dwrgetnumber.js 根据情况自定义！ -->
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/util.js'></script>
<script language="javascript">
function getnumber(){
var lb=document.getElementById("leibie1");//获得设备类别对象
var lbno=lb.selictedindex;//获得设备类别编号
var lbvalue=document.getElementById("leibie1").value;//获得设备类别
if (lbvalue!=null)
{
dwrgetnumber.Send(lbvalue,callback);
}
else
{
return;
}
}
function callback(data){
var congAddress=document.getelementbyid(cong1);
congAddress.innerhtml="";
for(var i=0;i<data.length;i++)
{
congAddress.options.add(new option(data[i]));
}
}
</script> dwr.xml代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="dwrgetnumber">
<param name="class" value="dwr.dwrgetnumber" />
</create>
</allow>
</dwr>
dwrgetnumber.java代码如下：
package dwr;import hib.HibernateSessionFactory;import java.util.ArrayList;import antlr.collections.impl.Vector;import Bean.UserMessage;
import Dao.dataDao;public class dwrgetnumber {
public String[] Send(String dname){//根据设备类别获得从设备号
ArrayList<UserMessage> umal=null;
String data[]=null;
try {
dataDao dd=new dataDao();
UserMessage um=new UserMessage();
String congnumber=dd.findcid(dname);//获得设备类别号
umal=dd.getUserMessage(congnumber);//根据设备类别代号查找记录
data=new String[umal.size()];
for(int i=1;i<=umal.size();i++)
{
um=umal.get(i-1);
data[i]=um.getNumber();
}
} catch (Exception e){
e.printStackTrace();
}
return data;
}
}
web.xml代码如下：
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>scriptCompressed</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
为什么我单击leibie1时，getnumber()执行到dwrgetnumber.Send(lbvalue,callback);
时出错，错误：dwrgetnumber未定义
<script type='text/javascript' src='/dwr/interface/dwrgetnumber.js'></script> <script type='text/javascript' src='/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/util.js'></script>
改成
<script type='text/javascript' src='dwr/interface/dwrgetnumber.js'></script> <script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>