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"> < ...
随机推荐
- 微信小程序入门——Mustache语法学习
微信小程序中用到了大量Mustache语法,特发此文学习一下 1.简单的变量调换:{{name}} 1 var data = { "name": "Willy" ...
- hdu 1298 T9
字典树+DFS. #include<cstdio> #include<cstring> #include<cmath> #include<string> ...
- hdu1012
#include<iostream>#include<stdio.h> using namespace std; int jiechen(int n){ int i; ...
- java--方法重写与重载
方法重写 /*方法重写(一般多用在继承上) 定义:它是指子类和父类的关系,子类重写了父类的方法. 两个方法返回值.方法名.参数列表必须完全一致! 出现原因:在Java中,子类可继承父类中的方法,而不需 ...
- jQuery动态添加元素事件
在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...
- Android启动另一个APP时，注意disable与enable的问题
在写游戏sdk时候遇到了一个需要在sdk中通过scheme来启动支付宝的免密支付功能,所以需要在设备中通过包名检查一下支付宝是否存在. 此时遇到了一个问题,在三星设备中可以将app给处于disable ...
- jquery 画板折叠
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
- 二维离散平稳小波分解swt2
对信号X进行N尺度平稳小波分解 [A,H,V,D]=swt2(X,N,'wname'); clc,clear all,close all; load woman; [cA,cH,cV,cD]=swt2 ...
- LightOJ 1337 F - The Crystal Maze (bfs)
Description You are in a plane and you are about to be dropped with a parasuit in a crystal maze. As ...
- Gentoo网络配置
网卡识别配置 要开始配置你的网卡,你首先需要告诉Gentoo RC系统你的网卡. 可以用ifconfig命令查看自己网卡名字: ifconfig -a 网卡名字(如eth0)的识别是通过在/etc/i ...