实现要点：
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 οnlοad="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"
οnchange="buildSelects(this.value,'111');" />
<s:select id="111" label="互动1" list="#{'':'--please select--'}"
name="favoriteColor" emptyOption="false" οnchange="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>
到此代码全部结束！ :arrow:
项目要用到，花了一天的时间查资料才搞定，累！
:x 还好有好结果。 :)
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 οnlοad="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"
οnchange="buildSelects(this.value,'111');" />
<s:select id="111" label="互动1" list="#{'':'--please select--'}"
name="favoriteColor" emptyOption="false" οnchange="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>
到此代码全部结束！ :arrow:
项目要用到，花了一天的时间查资料才搞定，累！
:x 还好有好结果。 :)
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
