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"> < ...

随机推荐

PHP高效获取远程图片尺寸和大小
/** * 获取远程图片的宽高和体积大小 * * @param string $url 远程图片的链接 * @param string $type 获取远程图片资源的方式, 默认为 curl 可选 f ...
JavaScript详解
JavaScript可以说是web开发中必备的一种技术.它具有灵活,简单,高效等特点.这次DRP中大量的用到了js,让自己对js有了更深的了解.看完这个以后还回去看了一下牛腩的js视频.把以前没看的看 ...
文本变语音引擎 ekho
https://github.com/donaldlee2008/ekho https://www.oschina.net/p/ekho
grunt学习随笔
1 grunt 安装全局安装 npm install -g grunt-cli 2 配置好package.json 和 Gruntfile 文件,这两个文件必须位于项目根目录下. 2.1packa ...
安卓---achartengine图表----简单调用----使用view显示在自己的布局文件中----actionBar的简单设置
AChartEngine 是一个安卓系统上制作图表的框架,关于它的介绍大家可以百度,也可以参考下面这篇博客http://blog.csdn.net/lk_blog/article/details/76 ...
HDU 1361 Parencodings(栈)
题目链接 Problem Description Let S = s1 s2 … s2n be a well-formed string of parentheses. S can be encode ...
重登陆模式－－ESFramework 4.0 快速上手（07）
在ESFramework框架中基于TCP的服务端引擎(当然也包括Rapid引擎)都采用了这样一条规则:默认情况下,客户端与服务器成功建立TCP连接以后,服务端会从客户端发过来的第一条消息中取出消息头的 ...
Echart图表相关配置项的设置
饼状图提示框单位显示在{c}后面即可添加任意单位内容. 一条记录含有多组数据的柱状图单位显示标注单位的显示. 目前还未找到方法实现,当鼠标移动到标注上时设置显示单位. 标线单位的显示
iOS 自定义导航栏笔记
一.UINavigationBar的结构导航栏几乎是每个页面都会碰到的问题,一般两种处理方式:1.隐藏掉不显示 2.自定义 1. 添加导航栏 TestViewController * mainVC ...
安卓Activity组件
Activity生命周期熟悉javaEE的朋友们都了解servlet技术,我们想要实现一个自己的servlet,需要继承相应的基类,重写它的方法,这些方法会在合适的时间被servlet容器调用.其 ...

Ajax及select级联

Ajax及select级联的更多相关文章

随机推荐

热门专题