下拉列表---demo---bai
select.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'select.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> </head>
<script src="js/myajax.js"> <!--导入外部的js文件-->
</script> <script type="text/javascript"> function send_ajax_request_fordept()
{
//b 通过open方法连接服务器
var method ="get";
var url = "DeptServlet";//
var paras = "op=findall";
//调用myajax.js中的send_ajax_request简化代码
send_ajax_request(method,url,paras,doreceive_dept) ;
} //发送ajax请求，查找该部门对应的员工
function send_ajax_request_foremp()
{
var method = "get";
var deptid = document.getElementById("dept").value;
var url = "DeptServlet";
var paras = "op=findbydepid&deptid="+deptid;
//调用myajax.js中的send_ajax_request简化代码
send_ajax_request(method,url,paras,doreceive_emp) ;
} //处理部门的响应数据
function doreceive_dept()
{
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
//alert(xmlHttpRequest.responseText);
//将ajax响应作为下拉列表的内部html
document.getElementById("dept").innerHTML = xmlHttpRequest.responseText;
send_ajax_request_foremp();
}
} //处理员工的响应数据
function doreceive_emp()
{
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
//alert(xmlHttpRequest.responseText);
//将ajax响应作为下拉列表的内部html
document.getElementById("emp").innerHTML = xmlHttpRequest.responseText;
}
} </script> <body onload="send_ajax_request_fordept()">
请选部门
<select id="dept" name="dept" onchange="send_ajax_request_foremp()">
<option value="-1">请选择...</option>
</select>
员工<select id="emp" name="emp">
<option value="-1">请先选择部门...</option>
</select>
</body>
</html>
DeptServlet import java.io.IOException;
import java.io.PrintWriter;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class DeptServlet extends HttpServlet { /**
* Constructor of the object.
*/
public DeptServlet() {
super();
} /**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
} /**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doPost(request,response);
} /**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { //1 中文处理
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//2 获取op参数
String op = request.getParameter("op");
//3 根据op调用具体方法
if("findall".equals(op))
{
findAll(request,response);
}
else if("findbydepid".equals(op))
{
findByDeptId(request,response);
}
} //根据部门编号，获取对应的员工
private void findByDeptId(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
//1 读取部门 编号 int deptid = Integer.parseInt(request.getParameter("deptid"));
//思路，构造<option></option>作为下拉的子html进行返回
String html = "";
//调用模型，完成查询
List<Emp> list = new EmpDao().findByDeptid(deptid); for(Emp e:list)
{
html += "<option value='"+e.getEid()+"'>"
+e.getEname()+"</option>";
}
PrintWriter out = response.getWriter();
out.print(html);
out.flush();
out.close(); } //用于处理ajax请求，查找所有的部门
private void findAll(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
//思路，构造<option></option>作为下拉的子html进行返回
String html = "";
List<Dept> list = new DeptDao().findAll(); for(Dept d:list)
{
html += "<option value='"+d.getDepid()+"'>"
+d.getDepname()+"</option>";
}
PrintWriter out = response.getWriter();
out.print(html);
out.flush();
out.close();
} /**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
} }
public class Emp
{
private int eid;
private String ename; private Dept dept;//该员工对应的部门 public int getEid() {
return eid;
} public void setEid(int eid) {
this.eid = eid;
} public String getEname() {
return ename;
} public void setEname(String ename) {
this.ename = ename;
} public Dept getDept() {
return dept;
} public void setDept(Dept dept) {
this.dept = dept;
} public Emp(int eid, String ename, Dept dept) {
super();
this.eid = eid;
this.ename = ename;
this.dept = dept;
}
}
import java.util.ArrayList;
import java.util.List; public class EmpDao {
private static List<Emp> list = new ArrayList<Emp>();
static
{ try {
Class.forName("DeptDao");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
list.add(new Emp(1, "张3", DeptDao.list.get(0)));
list.add(new Emp(2, "张4", DeptDao.list.get(1)));
list.add(new Emp(3, "张5", DeptDao.list.get(2)));
list.add(new Emp(4, "张6", DeptDao.list.get(3)));
list.add(new Emp(5, "张7", DeptDao.list.get(0)));
list.add(new Emp(6, "张8", DeptDao.list.get(1)));
list.add(new Emp(7, "张9", DeptDao.list.get(2)));
list.add(new Emp(8, "张10", DeptDao.list.get(3)));
} //给定部门编号，找出该部门对应的所有的员工
public List<Emp> findByDeptid(int depid)
{
List<Emp> result = new ArrayList<Emp>();
for(Emp e:list)
{
if(e.getDept().getDepid()==depid)
{
result.add(e);
}
}
return result;
}
}
public class Dept
{
private int depid; //部门编号
private String depname; //部门名
public int getDepid() {
return depid;
}
public void setDepid(int depid) {
this.depid = depid;
}
public String getDepname() {
return depname;
}
public void setDepname(String depname) {
this.depname = depname;
}
public Dept(int depid, String depname) {
super();
this.depid = depid;
this.depname = depname;
}
}
import java.util.ArrayList;
import java.util.List; public class DeptDao
{
public static List<Dept> list = new ArrayList<Dept>();
static
{
list.add(new Dept(1,"软件部"));
list.add(new Dept(2,"商务部"));
list.add(new Dept(3,"行政部"));
list.add(new Dept(4,"咨询部"));
} //查找所有的部门
public List<Dept> findAll()
{
return list;
}
}
下拉列表---demo---bai的更多相关文章
- AngularJS 下拉列表demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- vue1 get,post交互及百度下拉列表demo
- 用NPOI导出Excel，生成下拉列表、以及下拉联动列表（第1篇/共3篇）
最近帅帅的小毛驴遇到一个很奇葩的需求: 导出Excel报表,而且还要带下拉框,更奇葩的是,下拉框还是联动的. 小毛驴一天比较忙,所以这等小事自然由我来为她分忧了.经历了两天,做了几种解决方案,最后完美 ...
- 如何在select下拉列表中添加复选框?
近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...
- 用backbone实现的一个MVC的小demo
一.Apache配置 本实例需要使用php支持.要现在Apache中配置虚拟目录,在Apache下的httpd-vhosts.conf文件中添加如下代码 <VirtualHost *:80> ...
- JS弹出模态窗口下拉列表特效
效果体验:http://hovertree.com/texiao/js/20/ 或者扫描二维码在手机体验: 点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenq ...
- jquery选择器demo
大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
随机推荐
- VisualStudio卸载后无法再次安装的解决方法
解决方法如下: 1.删除 Visual Studio 2013 安装目录文件夹 Visual Studio 12.0 2.win+R 输入 %UserProfile%\Appdata\Local\Mi ...
- springcloud一些概念知识
1.Eureka 1)Eureka服务治理体系支持跨平台 2)三个核心概念:服务注册中心.服务提供者以及服务消费者 3)服务续约:注册完服务之后,服务提供者会维护一个心跳来不停的告诉Eureka Se ...
- 用java.lang.Math.random()语句，随机输出{size:自定义参数}个数不重复并且按顺序从小到大排列（冒泡排序）
package com.test; import java.lang.reflect.Field; import java.lang.reflect.Modifier; import java.lan ...
- BZOJ4311：向量
题意:要求支持三个操作,加入删除一个向量,询问当前向量与给定向量的最大值. 题解:线段树时间分治,每个区间做一个凸包,查询的时候到对应区间的凸包上三分. (话说我这个可能有点问题,三分那一块R-L&g ...
- Qt中使用setStyleSheet对QPushButton按钮进行外观设置
Qt中使用setStyleSheet对按钮进行外观设置 字体颜色的设置一般时以下两种方案: (1)属于QWidget子类的一些控件 可以直接使用样式表,例如label->setStyleShee ...
- JAVA8新特性——方法引用
JAVA9都要出来了,JAVA8新特性都没搞清楚,是不是有点掉队哦~ 在Lamda新特性的支持下,JAVA8中可以使用lamda表达式来创建匿名方法.然而,有时候我们仅仅是需要调用一个已存在的方法(如 ...
- python快速学习-常用內建模块
- java RC4加密解密
package com.dgut.app.utils; import java.lang.Byte; import java.util.UUID; public class RC4 { public ...
- ActiveMQ消费者接收消息的过程
[http://manzhizhen.iteye.com/blog/2094130] org.apache.activemq.ActiveMQMessageConsumer同步接收
- Memcached的特点和使用
特点: Memcached是由Danga Interactive开发的,高性能的,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度 Memcached的缓存是一种分布式的,可以让 ...