`
justshare
  • 浏览: 106427 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

AJAX二级下拉框联动

阅读更多
<SCRIPT type="text/javascript">
        var req;
        window.onload=function(){
        }
        
        function Change_Select(url, parentInputId, childInputId)
        {
            var parentInputValue = document.getElementById(parentInputId).value;
            var showUrl = url + "&parentInputId="+ parentInputId + "&parentInputValue=" + parentInputValue;
            //alert(showUrl);
            showUrl=encodeURI(showUrl); 
  			//alert(showUrl);
  			showUrl=encodeURI(showUrl);
            //alert(showUrl);
            if(window.XMLHttpRequest)
            {
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            if(req)
            {
                req.open("GET",showUrl,true);
                req.onreadystatechange= function() {
                	callback(childInputId);
                }
                req.send(null);
            }
        }
        
        function callback(childInputId)
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage(childInputId);
                }else{
                	// Not able to retrieve descriptionInvalid URI: isHexDigit
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
        
        function parseMessage(childInputId)
        {
        	//alert();
            var xmlDoc=req.responseXML.documentElement;
            if(xmlDoc == 'null') {
            	alert("xmlDoc="+xmlDoc);
            }
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_child=document.getElementById(childInputId);
            var select_child_length = select_child.options.length;
            for(var i = select_child_length-1; i >= 0; i--){
            	select_child.remove(i);
            }
            
            //alert("xSel.length="+xSel.length);
            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_child.options.add(option);
                }catch(e){
                }
            }
            
            
        }
</SCRIPT>


HTML调用:
<select id="parentId" onChange="Change_Select('seriesTextboxAction.do', 'parentId', 'childId')">
    <option value="">- Select One -</option>
    <option value="111">111</option>
    <option value="222">222</option>
</select>

<select id="childId">
    <option value="">- Select One -</option>
</select>


JAVA(Action)调用:
List<DropTo> dropList = Data List(from DB or other file);
int childListSize = dropList.size();
																response.setContentType("text/xml");						        response.setHeader("Cache-Control","no-cache");

StringBuffer buffer = new StringBuffer();
buffer.append("<selects>");
						        						        if(childListSize > 0) {
    for(int i = 0; i < childListSize; i ++) {
        DropTo dropFromDB = dropList.get(i);
        String showKey = dropFromDB.getShowKey();  
        String showValue = dropFromDB.getHiddenValue();
        System.out.println("showKey="+showKey+"  showValue="+showValue);
        buffer.append("<select><value>").append(showKey).append("</value>");
        buffer.append("<text>").append(showValue).append("</text></select>");
    }
    buffer.append("</selects>");
    response.getWriter().write(buffer.toString());
    response.getWriter().flush();
response.getWriter().close();						        
}


Struts:
<action name="seriesTextboxAction" class="xxxx.SeriesTextboxAction">
    <result name="success"></result>
</action>
分享到:
评论

相关推荐

    asp二级联动下拉框,三级联动下拉框

    3. **JavaScript或AJAX**:当一级下拉框的`onchange`事件触发时,通过AJAX向服务器发送请求,获取新的二级下拉框数据,并更新DOM。 4. **数据库连接**:在`conn.asp`文件中,通常包含数据库连接代码,使用ADO...

    2级下拉框联动含数据库

    在IT行业中,二级下拉框联动是一个常见的交互设计,它常用于网页表单或应用程序中,使得用户在选择一个选项后,第二个下拉框会自动更新其内容,以展示与前一个选择相关的数据。这种技术尤其适用于有层级关系的数据...

    实现jsp页面二级下拉框联动,实时读取数据库数据

    在网页设计中,二级下拉框联动是一种常见的交互方式,特别是在数据量较大、分类层次分明的情况下,能够有效地帮助用户快速筛选和定位所需信息。本文将详细介绍如何使用JSP(JavaServer Pages)技术来实现这样的功能...

    Asp.net二级下拉框无刷新联动

    标题"Asp.net二级下拉框无刷新联动"所涉及的核心技术是JavaScript、Ajax以及服务器端的C#或VB.NET编程。这里的关键在于利用Ajax异步通信,实现前后端数据的快速交换,同时结合客户端的JavaScript事件监听,来驱动二...

    ajax 实现二级下拉框,地址联动,serverlet,java,xmlHttp

    首先,二级下拉框联动通常用于地理信息的选择,例如省份选择后,城市下拉框自动更新对应省份的城市。这种功能的核心是,当用户在一级下拉框中选择一个选项时,系统会异步地(即不刷新整个页面)获取并填充二级下拉框...

    smarty ajax 下拉框二级联动

    Smarty + Ajax 下拉菜单二级联动: 1. 建立数据库ajaxtest (使用utf8) 2. 进行conn.php 修改root密码 3. 导入表 product.sql --- 主产品 4. 导入表 producttest.sql -- 二级产品 弄好后运行:...

    layui下拉框二级数据联动 fzzx.zip

    例如,一级下拉框选择省份后,二级下拉框会自动更新为对应省份的城市列表。 在提供的`fzzx.zip`压缩包中,包含了一个名为`a.html`的文件,这个文件很可能是用来展示如何实现layui下拉框二级联动的示例代码。打开这...

    Ajax实现下拉框三级联动

    当用户在一级或二级下拉框中做出选择时,触发事件,发送Ajax请求到服务器。 4. **Ajax请求**:当事件触发后,JavaScript会构造一个XMLHttpRequest对象,发送GET或POST请求到服务器端的处理程序,如Servlet或PHP。...

    Ajax 无限级 联动下拉框

    当用户在一级下拉框选择某个选项时,二级下拉框会根据所选内容动态加载相关数据,以此类推。这种效果可以通过Ajax实现,每级下拉框的选项改变时,都触发一个Ajax请求,获取并填充下一级别的选项。 三、实现步骤 1. ...

    ajax实现二级下拉框和用户名校验

    JavaScript(通常是jQuery库)会监听一级下拉框的`change`事件,当用户选择一项时,触发Ajax请求,服务器返回新的下拉框选项,然后动态更新二级下拉框。 **实现步骤:** 1. 创建HTML结构,包括两个下拉框。 2. 使用...

    JQuery+年月日三级下拉框联动

    在网页开发中,"JQuery+年月日三级下拉框联动"是一个常见的交互设计,主要用于用户输入日期的场景,例如填写表单时选择出生日期。这个设计涉及到JavaScript库JQuery的使用,以及HTML下拉框(select)的动态联动效果...

    js世界省洲三级下拉框联动

    当用户在第一级下拉框选择国家时,`change`事件触发,执行相应的JavaScript函数,更新第二级下拉框的选项。 4. **数据结构**:通常,这些数据(国家、省份和城市)会被存储在一个合适的结构中,如对象数组或JSON...

    JQuery年月日三级下拉框联动

    在网页开发中,有时我们需要创建一个用户友好的界面来选择日期,这通常涉及到年、月、日的三级下拉框联动。"JQuery年月日三级下拉框联动"就是一个解决此类需求的方案,它利用JavaScript库JQuery的便利性和高效性,...

    在一个jsp页面实现二级下拉框联动,实时读取数据库数据.pdf

    在本文中,我们将探讨如何在一个JSP页面上实现二级下拉框联动,并实时从数据库获取数据。这是一个常见的需求,尤其在构建动态Web应用程序时,它能够提供用户友好的交互体验,帮助用户根据他们的选择过滤和展示相关...

    mvc3二级联动下拉框

    当用户在一级下拉框中做出选择时,会触发一个Ajax请求,控制器根据请求的数据返回对应的二级下拉框选项。 2. 视图(Views):视图负责渲染页面,包括下拉框的HTML结构。在ASP.NET MVC中,视图通常使用Razor语法编写...

    Ajax实现二级/三级联动下拉框---servlet版

    Servlet返回市的JSON数据后,前端JavaScript需要解析这个响应,并将数据填充到二级下拉框中。同样,当用户选择一个市时,再次使用Ajax请求获取对应的区/县,更新三级下拉框。 5. **HTML和JavaScript**: 页面的...

    下拉框二级联动

    本文将详细讨论“下拉框二级联动”这一主题,以及如何利用AJAX和JSON技术来实现这一功能。 首先,我们要理解什么是二级联动。在多级选择的场景下,二级联动指的是当用户在一个下拉框(Dropdown)中做出选择时,第二...

    ajax++jsp二级联动下拉框,无刷新分页

    这种效果是通过Ajax实现的,当用户在一级下拉框中做出选择时,触发Ajax事件,向服务器发送请求获取对应的数据,然后在二级下拉框中动态填充这些数据。 **无刷新查询** 无刷新查询是Ajax的重要应用之一,它实现了在...

Global site tag (gtag.js) - Google Analytics