基于Ajax的二级联动下拉菜单

最新推荐文章于 2024-09-17 14:30:35 发布

Edens_Song

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量549

点赞数

分类专栏： JAVA学习文章标签： ajax class javascript string dwr function

JAVA学习专栏收录该内容

36 篇文章 0 订阅

订阅专栏

我这里采用了一个ajax的框架：DWR，这个是把java代码影射成js的一个工具。

index.htm

<html>

<script src="/dwrajax/dwr/interface/ItemsBean.js"></script>
<script src="/dwrajax/dwr/engine.js"></script>
<script src="/dwrajax/dwr/util.js"></script>

<script language="javascript">
function update1()
{
      ItemsBean.ClassList(createList1);
}
function createList1(data)
{
   DWRUtil.removeAllOptions("classid");
   DWRUtil.addOptions("classid", data);
}

function update2()
{
      ItemsBean.UserList(createList2,DWRUtil.getValue("classid"));
}
function createList2(data)
{
   DWRUtil.removeAllOptions("userid");
   DWRUtil.addOptions("userid", data);
}
</script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>班级和学生Ajax级联下拉菜单</title>
</head>

<body οnlοad="update1()">

<form name="formform">
   班级<select name="classid" id="classid" οnchange="javascript:update2();"></select>
   学生<select name="userid" id="userid"></select>
</form>

</body>

</html>

ItemsBean.java
package org.baiyun;

import java.util.*;
/**
*
* @author baiyun
*/
public class ItemsBean {
private String[] class1 = {"同学1","同学2","同学3","同学4","同学5","同学6"};
private String[] class2 = {"同学7","同学8","同学9","同学10"};
private String[] class3 = {"同学11","同学12","同学13","同学14","同学15","同学16","同学17"};
private String[] class4 = {"同学18","同学19","同学20"};
private String[] class5 = {"同学21","同学22","同学23","同学24","同学25","同学26"};
/** Creates a new instance of ItemsBean */
public ItemsBean() {
   }

public Map ClassList() {
      Map reply = new LinkedHashMap();
      reply.put("0", "所有");
      reply.put("1", "班级1");
      reply.put("2", "班级2");
      reply.put("3", "班级3");
      reply.put("4", "班级4");
      reply.put("5", "班级5");
      return reply;
   }

public Map UserList(String CLASSID) {
      Map reply = new LinkedHashMap();
      reply.put("0", "所有");

      // 这里用数组模拟数据库查询结果。
      // 真实环境中，你只要将数据库查询结果放入到reply里面就可以了。
      // reply的id就是返回后下拉框的option的value，reply的value就是返回后下拉框的option的text。
      // 如: sql = "select * from users where classid=?";
      if(CLASSID==null || CLASSID.equals("") || CLASSID.equals("0")){
         //
      }else if(CLASSID.equals("1")){
         int id =1;
         for(int i=0;i<class1.length;i++){
               reply.put(""+id, class1);
               id++;
         }
      }else if(CLASSID.equals("2")){
         int id =1;
         for(int i=0;i<class2.length;i++){
               reply.put(""+id, class2);
               id++;
         }
      }else if(CLASSID.equals("3")){
         int id =1;
         for(int i=0;i<class3.length;i++){
               reply.put(""+id, class3);
               id++;
         }
      }else if(CLASSID.equals("4")){
         int id =1;
         for(int i=0;i<class4.length;i++){
               reply.put(""+id, class4);
               id++;
         }
      }else if(CLASSID.equals("5")){
         int id =1;
         for(int i=0;i<class5.length;i++){
               reply.put(""+id, class5);
               id++;
         }
      }

      return reply;
   }
}

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
<servlet>
   <servlet-name>dwr-invoker</servlet-name>
   <display-name>DWR Servlet</display-name>
   <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
   <init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
   </init-param>
</servlet>
<servlet-mapping>
   <servlet-name>dwr-invoker</servlet-name>
   <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

<welcome-file-list>
   <welcome-file>index.htm</welcome-file>
</welcome-file-list>
</web-app>

dwr.xml: 是让js和java直接通讯，很神奇吧~ 这就是dwr的贡献。
<?xml version="1.0" encoding="gbk"?>
<!DOCTYPE dwr PUBLIC
   "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
   "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
<allow>
   <create creator="new" javascript="ItemsBean">
   <param name="class" value="org.baiyun.ItemsBean"/>
   </create>

</allow>
</dwr>