Ajax及select级联
cascade.jsp(Test/WebContent/jsp/cascade.jsp):
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cascade</title>
<script type="text/javascript" src="/Test/js/utilAjax.js"></script>
</head>
<body>
<span id="spanId1" >
<select id="selectId1" name="selectId1" onchange="sendRequest(this.value,'spanId','selectId',2)">
<option value="">请选择1</option>
<option value="11">动物</option>
<option value="22">植物</option>
</select>
</span> <span id="spanId2">
<!--
<select id="selectId2" name="selectId2" onchange="sendRequest(this.value,'spanId','selectId',3)">
<option value="">请选择2</option>
<option value="21">菜单21</option>
<option value="22">菜单22</option>
<option value="23">菜单23</option>
<option value="24">菜单24</option>
</select>
-->
</span> <span id="spanId3">
<!--
<select id="selectId3" name="selectId3" onchange="sendRequest(this.value,'spanId','selectId',4)">
<option value="">请选择3</option>
<option value="31">菜单31</option>
<option value="32">菜单32</option>
<option value="33">菜单33</option>
<option value="34">菜单34</option>
</select>
-->
</span> <span id="spanId4"></span>
</body>
</html>
(Test/WebContent/js/utilAjax.js):
var XMLHttpReq;
var this_hierarchy;
var this_objectSaId;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpReq=new XMLHttpRequest();
}
else if(window.ActiveXObject){
try{
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
return XMLHttpReq;
} //url 请求路径
//optionValue 父编号
function sendRequest(optionValue, objectSaId, objectSeId, hierarchy){
this_objectSaId = objectSaId;
this_hierarchy = hierarchy;
var url = "/Test/CascadeServlet";
var myDate = new Date();
var mytime = myDate.toLocaleString( );
/***
var pid="";
try{
if(""!=optionValue){
var id =optionValue.split("#");
if(id.length==0){
return;
}
pid = id[0];
}
}catch(e){
alert(e);
}
if(""==pid){return ;} if(tableName == "cm_city" || tableName == "car_city"){
document.getElementById(inputName).value = parentId;
}else if(tableName == "car_brand"){
if(hierarchy==2){
document.getElementById("carBrandId").value = pid;
}else if(hierarchy==4){
document.getElementById("carSeriesId").value = pid;
}else if(hierarchy==6){
document.getElementById("carModelId").value = pid;
}
}else{
document.getElementById(inputName).value = pid;
}
***/
var thisurl = url + "?optionValue=" + optionValue+ "&objectSaId=" + objectSaId + "&objectSeId=" + objectSeId + "&hierarchy=" + hierarchy + "&datetime=" + mytime;
XMLHttpReq = createXMLHttpRequest();
XMLHttpReq.open("post",thisurl,true);
XMLHttpReq.onreadystatechange=proce;
XMLHttpReq.setRequestHeader("X-Requested-With", "XMLHttpRequst");
XMLHttpReq.send(null);
}
function proce(){
if(XMLHttpReq.readyState==4){
if(XMLHttpReq.status==200){
var xmlReturn = XMLHttpReq.responseText;
var obj = document.getElementById(this_objectSaId+this_hierarchy);
if(""!=xmlReturn){
obj.innerHTML = xmlReturn;
}else{
obj.innerHTML = "";
}
for(var i=this_hierarchy+1; i<9; i++){
if(document.getElementById(this_objectSaId+i)!=null)
document.getElementById(this_objectSaId+i).innerHTML = "";
}
}else{
window.alert("请求失败");
}
}
}
CascadeServlet.java
package com.test.srevlet; import java.io.IOException;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/CascadeServlet")
public class CascadeServlet extends HttpServlet {
private static final long serialVersionUID = 1L; public CascadeServlet() {
super();
} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
response. setCharacterEncoding("UTF-8"); String optionValue = request.getParameter("optionValue");
String objectSaId = request.getParameter("objectSaId");
String objectSeId = request.getParameter("objectSeId");
String hierarchy = request.getParameter("hierarchy"); List<String> objectList = new ArrayList<String>();
StringBuffer returnStr = new StringBuffer(); if(Integer.parseInt(hierarchy)==2 ){
if(optionValue.equals("11")){
objectList.add("cat");
objectList.add("dog");
objectList.add("moneky");
objectList.add("pig");
}
if(optionValue.equals("22")){
objectList.add("玫瑰花");
objectList.add("荷花");
objectList.add("百合花");
objectList.add("鸡冠花");
}
}
if(Integer.parseInt(hierarchy)==3 && !optionValue.equals("")){
for (int i = 0; i <= 4; i++) {
objectList.add("菜单3"+i);
}
} if(objectList.size()>0){
returnStr = new StringBuffer();
returnStr.append("<select name=\"").append(objectSeId+hierarchy).append("\" id=\"").append(objectSeId+hierarchy).append("\"");
returnStr.append(" onchange=\"sendRequest(this.value,'")
.append(objectSaId)
.append("','")
.append(objectSeId)
.append("',")
.append((Integer.parseInt(hierarchy)+1))
.append(")\">");
returnStr.append("<option value=\"\">请选择</option>"); String object = null;
for(int i=0; i<objectList.size(); i++){
object = (String) objectList.get(i);
returnStr.append("<option value=\"").append(object+i).append("\">").append(object).append("</option>");
}
returnStr.append("</select>");
}
if(returnStr!=null){
response.getWriter().write(returnStr.toString());
}
}
}
Ajax及select级联的更多相关文章
- Ajax异步刷新省市级联
省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位 置:</TD> <TD&g ...
- XML：使用DOM技术解析xML文件中的城市，实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
- js select级联，上面分类，下面是内容
js select级联,上面分类,下面是内容. js级联效果如下: 分类: 请选择 水果 蔬菜 其他 内容: // html和js代码如下: <html> <hea ...
- jQuery实现select级联
使用Html5的数据属性(data-*)Map级联关系,代码如下: <!DOCTYPE html> <html> <head> <title>Selec ...
- jquery ajax生成Select
function DropDownList(url, domId, defaultValue) { /// <summary> /// ajax生成select /// ...
- Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
- Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）
需求类似这样 ↓ ↓ ↓ --> 菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: <script type="text/javascript"& ...
- jqery对于select级联操作
问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据 处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是 ...
- 使用AJAX(阿贾克斯)创建级联菜单
1. html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- MySQL5.5安装出现CMake错误找不到CMakelists.txt原因
今天虚拟机上测试安装 CentOS6.3 + PHP5.4.8 + MySQL5.5.28,结果捣鼓了半天 MySQL都没装上,老是CMake目录下找不到那个 lists 文件,郁闷的不行,最后发现问 ...
- zoj 3204 Connect them
最小生成树,我用的是并查集+贪心的写法. #include<stdio.h> #include<string.h> #include<math.h> #includ ...
- 《Windows编程循序渐进》——MFC封装机制详解
单文档
- CSS3的翻转效果
css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com ...
- 遍历（二）javascript的Foreach语法
原文:http://www.cnblogs.com/Fskjb/archive/2011/03/26/1996165.html 首先,虽然叫foreach语法但关键字还是用for哦,这个语法只是对平时 ...
- Python 逻辑行/物理行
物理行是你在编写程序时所看见的. 逻辑行是Python看见的单个语句.Python假定每个物理行对应一个逻辑行 . 默认地,Python希望每行都只使用一个语句,这样使得代码更加易读. 如果你想要在一 ...
- 4、Hibenrate中HQL的10中查询方式
二.具体事例如下: 2.0 编写如下sql语句 )); create sequence seq_teacher; insert into teacher values(seq_teacher.next ...
- 在线用户管理－－ESFramework 4.0 进阶（05）
无论我们采用何种通信框架来构建我们的分布式系统,在服务端进行用户管理都是非常重要的一个环节.然而用户管理是否应该隶属于通信框架了?这个并不一定,通常来说,用户管理是与具体应用紧密相关的,应该是由应用解 ...
- LeetCode OJ 31. Next Permutation
Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...
- CSS 背景 background 讲解
背景语法:background: background-color || background-image || background-repeat || background-attachment ...