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"> < ...
随机推荐
- POIXV Permutation
Description Multiset is a mathematical object similar to a set, but each member of a multiset may ha ...
- git 第一次 push 遇到问题
开始用 git 的时候我只会 git clone git pull git push 这三个命令满足了我的基本需求,到自己创建仓库的时候遇到了问题, git remote add origin htt ...
- POJ 2231 Moo Volume
Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu Description Farmer Jo ...
- 安装Python package
下载对应的源码,往往都是.tar.gz,.zip的压缩包,解压. 打开windows的cmd,切换到对应目录 C: cd C:\xx setup.py install
- ggplot2 scale相关设置2—时间设置
在scale设置中,常用的日期方面的设置函数包括: scale_x_date(),scale_y_date(),scale_x_datetime(),scale_y_datetime() 接下来, ...
- hdu_5832_A water problem(模拟)
题目链接:hdu_5832_A water problem 这是一个惨痛的教训,想这种这么大的大数肯定就是找个规律模拟一下. 然而我们队还写JAVA,用大数艹了13发罚时,真是TM智障了. #incl ...
- Django中url匹配规则的补充
Django中url匹配规则是在urls.py文件中配置的. 1.关于正则匹配优先级 在url匹配列表中,如果第一条和第二条同时满足匹配规则,则优先匹配第一条. 在url匹配列表中,如果第一条为正则模 ...
- JVM基础02-class文件
一.class文件结构 介绍之前,请下载一个Bytecode工具,例如byte code viewer或者Java Bytecode Editor,我用的是后者Java Bytecode Editor ...
- python读取CSV文件
python中有一个读写csv文件的包,直接import csv即可.利用这个python包可以很方便对csv文件进行操作,一些简单的用法如下. 1. 读文件 csv_reader = csv.rea ...
- LeetCode OJ 55. Jump Game
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...