`

二级联动基本代码

    博客分类:
  • ajax
阅读更多
function createXMLHttpRequest() {   
            if (window.ActiveXObject) {   
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
            }   
            else if (window.XMLHttpRequest) {   
                xmlHttp = new XMLHttpRequest();                   
            }
            
        }   
// 删除城市选项    
function clearCityList(){    
    var citys = document.getElementById("city");    
    while(citys.childNodes.length > 0){    
        citys.removeChild(citys.childNodes[0]);    
    }    
}    
   
//选项省份时    
function selectProvince(){    
    var province = document.getElementById("province").value;//获取省份值    
        
    if(province == ""){ //如果为空,则清空城市选项    
        clearCityList();    
        var citySelect = document.getElementById("city"); //获取城市select组件    
        var option = document.createElement("option");    
        option.appendChild(document.createTextNode("请选择城市"));    
        citySelect.appendChild(option);    
        return ; //返回    
    }    
    //服务器处理地址,是一个Servlet    
    var url = encodeURI("ajax.portal?action=autoUpdate&province=" + province);
    url = encodeURI(url); 
    createXMLHttpRequest();//创建xmlHttp对象;    
    xmlHttp.onreadystatechange = handleStateChange; //回调函数    
    xmlHttp.open("GET",url,true);    
    xmlHttp.send(null);    
}    
   
//回调函数    
function handleStateChange(){    
    if(xmlHttp.readyState == 4){    
        if(xmlHttp.status == 200){    
            updateCitysList();    
        }    
    }    
}    
   
//页面更新城市集合函数    
function updateCitysList(){    
    clearCityList();//首先删除先前的城市选项    
    var citySelect = document.getElementById("city"); //获取城市select组件    
    var results = xmlHttp.responseXML.getElementsByTagName("city");//获取Ajax返回的结果,city为返回的XML里的节点    
    var option = null;    
    for(var i=0; i<results.length; i++){            
        option = document.createElement("option");    
        option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));    
        citySelect.appendChild(option);    
    }    
} 


<logic:present name="provinces" scope="request">   
            <html:select property="province" styleId="province" onchange="selectProvince();">   
                <html:option value="">请选择省份</html:option>   
                <html:options name="provinces" labelName="provinces" />   
            </html:select>   
   
            <html:select property="city" styleId="city" style="width:90px">   
                <html:option value="">请选择城市</html:option>   
            </html:select>   
        </logic:present>       

if("autoUpdate".equals(form.getAction())){
			response.setContentType("text/xml; charset=UTF-8");//xml
	        response.setHeader("Cache-Control","no-cache");//HTTP1.1
	        response.setHeader("Pragma","no-cache");//HTTP1.0
	        response.setDateHeader("Expires",0);
	        PrintWriter out=null;
	        String name = request.getParameter("province");   
			try {
				out = response.getWriter();
//				name = new String(name.getBytes("ISO8859-1"), "UTF-8"); 
				name=java.net.URLDecoder.decode(name,"UTF-8");
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}   
	        System.out.println("name="+name);
	        Dom4jUtil dom=new Dom4jUtil();
			String fileName=getRealPath()+File.separator+"src"+File.separator+"city.xml";
			System.out.println("fileName="+fileName);
			dom.parse(fileName);
			StringBuffer sb = new StringBuffer("<citys>");
			List citys = dom.getChildList();//获取城市
			System.out.println("citys.size="+citys.size());
			for(int i=0;i<citys.size();i++){
				KeyValue city=(KeyValue)citys.get(i);
//				System.out.println("city.getKey()="+city.getKey());
				if(city.getKey().equals(name)){
					sb.append("<city>");    
					sb.append(city.getValue());    
					sb.append("</city>");
				}
			}
			sb.append("</citys>");    
	        System.out.println("sb.toString="+sb.toString());    
	        out.print(sb.toString());    
	        out.flush();    
	        out.close();    

		}
分享到:
评论

相关推荐

    php代码实现二级联动下拉菜单效果

    首先,我们要理解二级联动的基本概念。它是指当用户在一个下拉菜单中选择一个选项时,另一个相关的下拉菜单会根据用户的选择动态地更新其选项。这通常涉及到两个主要的HTML下拉列表(`&lt;select&gt;`元素)和JavaScript或...

    二级联动代码

    提供的代码片段展示了如何使用JavaScript和PHP实现二级联动的基本逻辑: - **变量初始化**:`var subcategorylen = 0;` 和 `array_subcategory = new Array();` 分别用于存储子类别的数量和子类别数据。 - **数据库...

    二级联动菜单示例代码

    在这个"二级联动菜单示例代码"中,我们可以期待找到实现这一功能的编程代码。通常,这种菜单的实现可能涉及HTML、CSS和JavaScript,或者是基于某个前端框架如React、Vue或Angular的组件。HTML负责构建菜单的基本结构...

    Ajax四级联动源代码

    通过理解和实践这个四级联动源代码,开发者不仅可以掌握Ajax的基本应用,还能深入理解前后端交互的流程,为以后的项目开发积累宝贵经验。同时,这个示例也提供了学习如何利用JavaScript处理动态数据和更新DOM的良好...

    js省市二级、三级联动完美代码

    这个"js省市二级、三级联动完美代码"压缩包中的"city"文件可能包含了实现这种联动效果的具体代码,可能包括HTML、CSS和JavaScript文件。你可以通过查看这些文件来学习实际的实现细节,包括如何组织数据、如何处理DOM...

    asp数据库二级联动

    首先,我们需要理解二级联动的基本原理。在数据库中,一级联动通常涉及一个主分类,二级联动则涉及到主分类下的子分类。例如,一级联动可能是省份,二级联动可以是城市。当用户在一级联动中选择了一个省份,二级联动...

    一个最简单的三级联动代码

    下面我们将深入探讨三级联动的基本概念、实现原理以及相关知识点。 三级联动通常指的是三个下拉菜单之间的联动关系,其中每一个下拉菜单的选择会影响到下一个菜单的选项。例如,在选择省份后,城市列表会根据所选...

    省市二级联动代码JS(无数据库)

    ### 知识点解析:省市二级联动代码JS(无数据库) ...综上所述,这段代码虽然简单但有效地实现了省市二级联动的基本功能。对于初学者来说,这是一个很好的学习示例,有助于理解如何在前端应用中实现简单的动态交互。

    datagridview使用combobox进行二级联动

    当需要实现二级联动效果时,即一个`ComboBox`的选择会影响到另一个`ComboBox`的选项,这种功能常见于多级分类选择或筛选场景。本篇文章将深入探讨如何在C#环境下,利用这两个控件在`DataGridView`中实现二级联动。 ...

    【JavaScript源代码】React实现二级联动(左右联动).docx

    在React开发中,二级联动是一种常见的交互效果,通常用于下拉菜单、地区选择等场景,让用户能够通过选择一级选项来筛选或展示二级选项。本文将详细介绍如何使用JavaScript和React实现二级联动,特别是左右联动的效果...

    android 二级联动

    首先,我们要理解Android二级联动的基本概念。二级联动指的是两个或多个下拉列表(Spinner)之间存在关联关系,当用户在第一个下拉列表中做出选择时,第二个下拉列表的数据会根据前者的选中值动态更新。这种联动效果...

    二级联动、三级联动

    在IT行业中,二级联动和三级联动是常见的前端交互设计,主要应用于下拉菜单或选择框之间数据的关联性展示。这种设计通常出现在如地区选择、商品分类筛选等场景,用户在选择一级选项后,二级、三级选项会相应更新,...

    小程序二级分类联动.rar

    这个压缩包中的“二级联动”文件很可能是修复后的代码示例,包括了必要的wxml、wxss和js文件,可以作为参考学习,帮助开发者理解并实现小程序中的二级分类联动功能。开发者需要结合自己的实际需求,对代码进行适当的...

    Android开发丶二级列表的联动功能实现

    通过阅读和分析这些代码,开发者可以更直观地学习如何在Android中实现二级列表的联动效果。 总的来说,实现Android中的二级列表联动功能需要对ListView或RecyclerView有深入的理解,掌握事件监听、数据交互以及布局...

    省市二级联动代码与数据库

    实现省市二级联动的基本步骤如下: 1. **创建数据库表**:设计两个表,如province(省份表)和city(城市表),province表有province_id(省代码)和province_name(省名),city表有city_id(市代码)、city_name...

    二级联动例子

    在这个"二级联动例子"中,我们可以推测`MainActivity`是主活动,其中包含了实现二级联动的核心代码。下面我们将详细分析这个过程: 1. **布局设计**:在`activity_main.xml`布局文件中,通常会有两个`Spinner`组件...

    jsp二级联动

    首先,二级联动的基本概念是指在一个下拉列表的选择项改变时,另一个相关的下拉列表会根据前者的选值自动更新其选项。这在很多场合都很有用,比如地区选择,用户先选择省份,然后城市列表会根据省份选择自动更新。 ...

    js二级联动_精简实用版

    总之,“js二级联动_精简实用版”是一个适用于快速实现省市级联功能的解决方案,它结合了JavaScript的基本概念和实际应用场景,是提升用户体验的一个有效工具。对于想要学习或使用这一功能的开发者来说,这是一个很...

    易语言组合框二级联动

    二级联动组合框的基本概念是,当用户在第一级组合框中做出选择时,第二级组合框会根据这个选择动态地更新其显示内容,这种交互方式提高了用户体验,使用户能够快速定位到所需信息。例如,在一个省份和城市的例子中,...

Global site tag (gtag.js) - Google Analytics