用ajax实现下拉列表的联动

wanglihu

浏览: 918213 次
性别:
来自: 黑龙江

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax技术

Ajax Struts JSP JavaScript CSS

实现要点：
1、下拉列表选项信息的删除与增加；
2、父列表信息变动带来的子下拉列表信息的变动。

具体实现例子：
一、js文件(select.js)
//全局变量定义
var searchReq = createAjaxObj();
var selectUpdateId;//存放要变动下拉列表框的id
var arrayIds;//存放所有联动下拉列表框的id

function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        if (window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
        }
    }
}

function createAjaxObj() {
    var httprequest = false;
    if (window.XMLHttpRequest) { // if Mozilla, Safari etc
        httprequest = new XMLHttpRequest();
        if (httprequest.overrideMimeType) {
            httprequest.overrideMimeType("text/xml");
        }
    } else {
        if (window.ActiveXObject) { // if IE
            try {
                httprequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    httprequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                }
            }
        }
    }
    return httprequest;
}

//Starts the AJAX request.
function buildSelects(propValue, subSelectId) {
    if (propValue == "") {
        delSubInfos(subSelectId);
        return ture;
    }
    selectUpdateId = subSelectId;
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        //var str = escape(document.getElementById("txtSearch").value);
        searchReq.open("POST", "direct.action?search=" + propValue, true);
        searchReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        searchReq.onreadystatechange = handleSearchSuggest;
        searchReq.send(null);
    }
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
        var str = searchReq.responseText;
        var mes = str.split(",");
        delSubInfos(selectUpdateId);
        for (i = 0; i < mes.length; i++) {
            var infos = mes[i].split("'");
            document.getElementById(selectUpdateId).appendChild(createOption(infos[0], infos[1]));
        }
    }
}

//创建下拉列表选项
function createOption(propValue, textValue) {
    var ops = document.createElement("option");
    ops.setAttribute("value", propValue);
    ops.appendChild(document.createTextNode(textValue));
    return ops;
}

//删除下拉列表选项
function clearOptions(selectNode) {
    selectNode.length = 1;
    //selectNode.childNodes[0].selected=true;
}

//初始化全局变量
function initAjax(argumentsMa) {
    arrayIds = arguments;
}

//删除此下拉列表和此下拉列表框下行联动的所有列表选项（不包含默认的第一条信息）
function delSubInfos(targetId) {
    var canClear = false;
    for (var i = 0; i < arrayIds.length; i++) {
        if (arrayIds[i] == targetId) {
            canClear = true;
        }
        if (canClear) {
            clearOptions(document.getElementById(arrayIds[i]));
        }
    }
}

二、jsp文件(select.jsp)
<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>用ajax技术来实现下拉列表互动</title>
<link rel="stylesheet" href="../css/tree.css">
<script language="JavaScript" type="text/javascript" src="../js/select.js"></script>
</head>
<body onload="initAjax('txtSearch','111','222');">
<s:form action="ajaxSelect" method="post" name="f1">
<s:select id="txtSearch" tooltip="Choose Your Favourite Color"
label="Favorite Color" list="{'--please select--','Red', 'Blue', 'Green'}"
name="favoriteColor" emptyOption="false"
onchange="buildSelects(this.value,'111');" />

<s:select id="111" label="互动1" list="#{'':'--please select--'}"
name="favoriteColor" emptyOption="false" onchange="buildSelects(this.value,'222');" />

<s:select id="222" label="互动2" list="#{'':'--please select--'}"
name="favoriteColor" emptyOption="false" />

</s:form>
</body>
</html>

三、action文件(AjaxSlectAction.java)

public class AjaxSlectAction extends ActionSupport {

private String search;

public String direct() throws IOException {
//System.out.println("search=" + search);
//本例子没有进行数据库连接，只采用模拟了信息进行简化。
String news = "0'New Red,1'New Blue, 2'New Green";

HttpServletResponse response= ServletActionContext.getResponse();
// 设置返回数据类型为xml格式
response.setContentType("text/html;charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.print(news);
//关闭流
        out.close();

return SUCCESS;
}

public String getSearch() {
return search;
}

public void setSearch(String search) {
this.search = search;
}
}

四、struts2的配置文件(struts-ajax-select.xml)
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<package name="direct" extends="struts-default">

<action name="direct" method="direct" class="com.ajax.AjaxSlectAction">
<result name="success">ajax/ajax-doubleselect.jsp</result>
</action>

</package>
</struts>

到此代码全部结束！