下拉列表---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 ...
随机推荐
- 字符串处理sdut 2411
题目:http://www.sdutacm.org/sdutoj/problem.php?action=showproblem&problemid=2411 关于字符串处理的题,此题坑点很多w ...
- 【转载】Java类加载原理解析
Java类加载原理解析 原文出处:http://www.blogjava.net/zhuxing/archive/2008/08/08/220841.html 1 基本信息 摘要: 每个j ...
- 1.java实现——正规表达式判断
目标:这个代码仅局限于所展示的正规表达式判断,也就是这是一个较单一的正规表达式判断(简易版). 既然是简易版的,所以若要修改这个正规表达式也是非常容易的,只要将二维数组中的数组修改即可.数组数据依据, ...
- Python OS导入一个文件夹所有文件
import os path = 'F:/save_file/seminarseries/' for root, dirs, files in os.walk(path): print(root) 这 ...
- js命令模式
命令模式(Command),将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤销的操作. 从命令模式的结构图可以看出,它涉及到五个角色,它们分别是 ...
- addslashes及其反函数 stripslashes
addslashes() 函数返回在预定义字符之前添加反斜杠的字符串. stripslashes() 去掉addslashes 所添加的反斜杠 预定义字符是: 单引号(') 双引号(") 反 ...
- django 添加自定义context
文档参考;http://python.usyiyi.cn/django_182/ref/templates/api.html 添加自定义上下文文件custom_processors.py # codi ...
- json与NSString转换
json to string NSData *jsonData = [NSJSONSerialization dataWithJSONObject:json options:NSJSONWriting ...
- DocString
文档字符串:写注释专用的, 在函数的第一个逻辑行的字符串是这个函数的 文档字符串 .注意,DocStrings也适用于模块和类,我们会在后面相应的章节学习它们. 文档字符串的惯例是一个多行字符串,它的 ...
- ViewPager渲染背景颜色渐变(引导页)--第三方开源--ColorAnimationView
下载地址:https://github.com/TaurusXi/GuideBackgroundColorAnimation 使用方法如下: <FrameLayout xmlns:android ...