`
wanglihu
  • 浏览: 917438 次
  • 性别: Icon_minigender_1
  • 来自: 黑龙江
社区版块
存档分类

用ajax实现下拉列表的联动

阅读更多

用ajax实现下拉列表的联动

关键字: 下拉列表

实现要点:
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>


到此代码全部结束!
分享到:
评论

相关推荐

    ajax 下拉列表联动

    本示例中提到的"ajax 下拉列表联动"是AJAX常见的一种应用场景,尤其在地理信息系统或者地址选择器中广泛使用。 在传统的网页中,如果需要用户选择省、市、县三级地址,通常需要三个独立的下拉列表,并且在用户改变...

    jquery ajax 实现省市县下拉列表联动

    在网页开发中,实现省市县下拉列表联动是一种常见的需求,尤其在填写地址或选择地理位置时。`jQuery`和`Ajax`技术的结合是解决这一问题的高效方式。`jQuery`是一个轻量级的JavaScript库,它简化了DOM操作、事件处理...

    用Ajax实现多级联动下拉列表For ASP.NET 采用WebService实现

    这是将《用Ajax实现多级联动下拉列表(无限级别,JSON传输数据,含全国地区数据库))》(原来是asp的)改写成ASP.NET,服务器端采用WebService。仍然使用JSON传数据。原文地址:...

    servlet+ajax做的两个下拉列表联动

    在Web开发中,"servlet+ajax做的两个下拉列表联动"是一种常见的交互技术,用于增强用户界面的动态性。这种技术通常应用于表单中,当用户在一个下拉列表中选择一个选项时,另一个下拉列表会根据所选选项动态更新其...

    Ajax实现java web 中下拉列表二级联动

    在Java Web开发中,二级联动下拉列表是一种常见的交互功能,通常用于地区选择、类别分类等场景。...通过以上步骤和注意事项,我们就可以在Java Web应用中成功实现Ajax驱动的二级联动下拉列表,提升用户的交互体验。

    基于Ajax的二级联动下拉列表.rar

    这里的“基于Ajax的二级联动下拉列表”是一个技术实现方案,它结合了Ajax(异步JavaScript和XML)技术和HTML、CSS、JavaScript来创建动态、无需刷新页面的交互体验。下面将详细介绍这一技术及其相关知识点。 首先,...

    ajax不限层级下拉列表联动

    总结来说,"ajax不限层级下拉列表联动"是一个利用Ajax技术,实现在Web应用中动态更新下拉列表,以提供多级选择功能的方法。它涉及到前端JavaScript的事件处理、Ajax通信以及DOM操作,后端的数据库查询和数据处理,...

    ajax实现动态下拉列表

    这个简单实例展示了AJAX如何实现动态下拉列表的联动效果。实际上,这样的功能在大型网站和应用中非常常见,例如在选择省份后自动填充城市列表。通过AJAX,我们可以构建更加动态、响应迅速的Web应用程序,提高用户...

    ajax+json+ashx实现下拉列表三级联动.rar

    在实际实现过程中,开发者需要编写JavaScript代码来处理用户交互,使用jQuery的$.ajax方法发起请求,以及在成功回调中更新下拉列表。服务器端的ASHX处理程序接收请求,查询数据库(如SQL Server)获取相关数据,然后...

    ajax 异步实现两级联动下拉列表和输入提示

    以上就是基于AJAX实现的二级联动下拉列表和输入提示的基本原理和步骤。这个项目是一个典型的实例,可以帮助开发者了解如何在实际应用中运用这些技术。通过不断实践和优化,我们可以提供更加高效、友好的用户体验。

    ajax dwr 框架实现二级联动下拉列表源码

    **Ajax DWR 框架实现二级联动下拉列表源码详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。DWR(Direct Web Remoting)则是一个用于Java web应用的开源...

    ajax 二级联动 php的下拉列表

    ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表

    用ajax实现的jsp二级联动下拉列表

    "ajax"代表了异步交互技术,"jsp"表明我们在服务器端使用的是JSP技术,"二级联动"说明了我们处理的是两个下拉列表的关联,而"下拉列表"则是实现这个功能的关键组件。 最后,压缩包中的"pcLink"文件可能是实现这个...

    ajax的二级联动下拉列表

    本文将深入探讨如何使用Ajax实现二级联动下拉列表,这是一种常见且实用的功能,尤其在数据筛选和表单填写时。联动下拉列表通常出现在需要根据父级选择项动态加载子级选项的场景,例如省份与城市的选择。 首先,我们...

    帝国CMS二级联动插件(ajax下拉列表) 帝国CMS二级联动插件(ajax下拉列表).rar

    本压缩包“帝国CMS二级联动插件(ajax下拉列表).rar”提供的就是针对帝国CMS系统的一个二级联动插件,利用AJAX技术实现实时数据加载。AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,...

    用Ajax实现多级联动下拉列表For JSP

    这是将《用Ajax实现多级联动下拉列表(无限级别,JSON传输数据,含全国地区数据库))》(原来是asp的)改写成JSP。下载包中包含一个org.json.jar,测试的时候,请将这个包加了应用服务器的lib目录中,原文地址:...

    ajax 下拉列表框

    本教程将深入探讨如何使用Ajax实现下拉列表框的联动效果,特别是针对城市选择的功能。 ### 1. 基本概念 - **下拉列表框(Dropdown List)**:HTML中的`&lt;select&gt;`元素用于创建一个下拉列表,用户可以从列出的选项中...

    ajax实现3级联动例子(vs2003带数据库)

    **Ajax 实现三级联动在 VS2003 中的应用** ...通过以上步骤,你就可以在 VS2003 中使用 Ajax 实现一个三级联动的例子。尽管这个版本的开发环境相对较旧,但它仍能展示出 Ajax 技术在提升用户体验方面的潜力。

    ajax 五级联动 下拉列表

    **Ajax五级联动下拉列表**是一种常见的前端交互设计,常用于实现动态、逐级筛选的效果,例如在地区选择、分类导航等场景中。在这个案例中,我们将探讨如何利用Ajax技术与SQL Server 2000数据库进行交互,构建一个五...

    Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动

    在本教程中,我们将探讨如何使用jQuery插件和AJAX技术来实现这一功能。 首先,让我们理解什么是jQuery。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery的API设计...

Global site tag (gtag.js) - Google Analytics