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"> < ...
随机推荐
- Ubuntu下NFS，TFTP服务搭建
环境:Ubuntu 一. 搭建NFS服务器 (1)安装: sudo apt-get install nfs-kernel-server #安装NFS服务器端 sudo apt-get instal ...
- 《JS权威指南学习总结--6.9序列化对象》
内容要点: 一.JSON.stringify()和JSON.parse() 1.对象序列化(serialization)是指将对象的状态转换为字符串,也可将字符串还原为对象.ES5提供了内置函数JSO ...
- Constraint where both columns cannot be null, but one can
ALTER TABLE TableA ADD CONSTRAINT CK_BothDepartsNotNull CHECK (departA IS NOT NULL OR departB IS NOT ...
- Nodejs（待补充）
Nodejs从入门到精通(待补充) 首先安装n模块: npm install -g n 第二步: 升级node.js到最新稳定版 n stable 是不是很简单?! n后面也可以跟随版本号比如: n ...
- CentOS安装Ruby组件
ruby安装#安装ruby组件yum install ruby ruby-irb ruby-devel rubygems rpm-build -y#安装Apache服务器yum install htt ...
- Delphi的StringReplace[转]
原文:http://blog.csdn.net/genispan/article/details/4458319 function StringReplace (const S, OldPattern ...
- OMCS开发手册（01） －－ 多媒体设备管理器
我们在前面一篇文章中提到:任何一个OMCS的Client都有两种身份,Owner和Guest.多媒体设备管理器工作于OMCS客户端,并以Owner的身份管理本地所有的多媒体设备.多媒体设备管理器对象是 ...
- LeetCode OJ 229. Majority Element II
Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. The algorit ...
- Spark 倾斜连接
[数据倾斜出现的原因] 并行计算中,我们总希望分配的每一个任务(task)都能以相似的粒度来切分,且完成时间相差不大.但是由于集群中的硬件和应用的类型不同.切分的数据大小不一,总会导致部分任务极大地拖 ...
- Gentoo网络配置
网卡识别配置 要开始配置你的网卡,你首先需要告诉Gentoo RC系统你的网卡. 可以用ifconfig命令查看自己网卡名字: ifconfig -a 网卡名字(如eth0)的识别是通过在/etc/i ...