`

二级下拉框

 
阅读更多
jsp
 <select id="AreaValues" onchange="AreaTypeChange()" style="width:100px;">
                <option value="-1">--</option>
               </select>
            <select id="TypeValues">
            <option value="-1">--</option>
            </select>



jquery代码

function AreaType() {
	$.getJSON("/locationsearch/LocationAreaAction.htm", AreaJson);
}

function AreaJson(json) {
	var data = (json.areavalues);
	for ( var theater in data) {
		var option = document.createElement("option");
		document.getElementById("AreaValues").appendChild(option);
		option.value = data[theater].areaseq;
		option.text = data[theater].areacode;

	}
}

function AreaTypeChange() {
	$("#TypeValues").children().remove();
	var areaseq = $("#AreaValues").find("option:selected").val();
	$.getJSON("/locationsearch/LocationTypeAction.htm",
			"twmsLocation.areaseq=" + areaseq, TypeJson);
}
function TypeJson(json) {
	var data = (json.typevalues);
	for ( var theater in data) {
		var option = document.createElement("option");
		document.getElementById("TypeValues").appendChild(option);
		option.value = data[theater].typeseq;
		option.text = data[theater].typecode;

	}
}

$(document).ready(function() {
	AreaType();

});




struts2配置

<!--locationaction对应的action文件   -->
<package name="locationsearch" extends="json-default" namespace="/locationsearch">
		<action name="LocationAreaAction" class="locationaction" method="AreaValues">
			<result type="json"/>
		</action>
		<action name="LocationTypeAction" class="locationaction" method="TypeValues">
			<result type="json"/>
		</action>
	</package>



java代码

	public void AreaValues()throws Exception {
		List<TwmsLocation> areavalues=null ;//查询获得结果
		
		JSONObject jsonobject = new JSONObject();
		JSONArray jsonarray = JSONArray.fromObject(areavalues);
		jsonobject.put("areavalues", jsonarray);
		Struts2Utils.renderJson(jsonobject.toString());
	}
	
	public void TypeValues()throws Exception {
		
		List<TwmsLocation> typevalues=null; //按照传递过来的areaseq查询出结果
		
		JSONObject jsonobject = new JSONObject();
		JSONArray jsonarray = JSONArray.fromObject(typevalues);
		jsonobject.put("typevalues", jsonarray);
		Struts2Utils.renderJson(jsonobject.toString());
	}




javabean文件


public class TwmsLocation extends BaseObject {

	private long areaseq;
	private String areacode;

	private long typeseq;
	private String typecode;

}
public long getAreaseq() {
		return areaseq;
	}

	public void setAreaseq(long areaseq) {
		this.areaseq = areaseq;
	}

	public String getAreacode() {
		return areacode;
	}

	public void setAreacode(String areacode) {
		this.areacode = areacode;
	}

	public long getTypeseq() {
		return typeseq;
	}

	public void setTypeseq(long typeseq) {
		this.typeseq = typeseq;
	}

	public String getTypecode() {
		return typecode;
	}

	public void setTypecode(String typecode) {
		this.typecode = typecode;
	}


分享到:
评论

相关推荐

    AJAX二级下拉框联动

    在网页开发中,AJAX(Asynchronous JavaScript and XML)二级下拉框联动是一种常见的交互设计,用于提升用户体验,尤其在处理复杂表单或选择结构化数据时。这种技术允许用户在一个下拉框中做出选择后,根据所选值...

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

    在Asp.net开发中,有时候我们需要实现一个功能,即二级下拉框的无刷新联动。这个功能常见于数据层级关系的展示,例如省份与城市、类别与子类别的选择等。用户在一级下拉框中选择一个选项时,二级下拉框会自动更新...

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

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

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

    在这个特定的场景中,我们讨论的是如何使用Ajax实现二级下拉框的联动,以及涉及到的技术如Servlet、Java和XMLHttp。 首先,二级下拉框联动通常用于地理信息的选择,例如省份选择后,城市下拉框自动更新对应省份的...

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

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

    2级下拉框联动含数据库

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

    省市二级、省市县三级下拉框

    二级下拉框通常指的是省级和市级的选择,用户先从一个下拉框中选择省份,然后根据所选省份自动更新第二个下拉框,展示该省内的城市。三级下拉框则进一步增加了县级的选择,用户在选定省份和城市后,第三个下拉框会...

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

    在JSP(JavaServer Pages)中实现二级下拉框联动,是一种常见的前端与后端交互的场景,常用于动态加载相关数据,例如地区选择、分类筛选等。在这个例子中,我们通过JavaScript、VBScript以及JSP来实现这一功能,确保...

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

    2. **ASP后台处理**:在服务器端,如`asp二级联动下拉框.asp`文件中,你需要获取数据库中的相关数据,并根据一级下拉框的选择动态生成二级下拉框的选项。 3. **JavaScript或AJAX**:当一级下拉框的`onchange`事件...

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

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

    二级关联下拉框jquery+ json java jsp

    4. 在jQuery的Ajax回调函数中,解析接收到的JSON数据,动态创建并填充二级下拉框的选项。 5. 更新二级下拉框,显示对应的一级类别下的子类别。 这个项目涉及到前端与后端的交互,需要熟练掌握jQuery的DOM操作和Ajax...

    javascript实现二级联动下拉框

    在网页设计中,二级联动下拉框是一种常见的交互元素,常用于地区选择、产品分类等场景,用户在选择一级选项后,二级下拉框会显示与之相关的子选项。JavaScript作为客户端脚本语言,是实现这种功能的重要工具。这篇...

    mvc3二级联动下拉框

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

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

    与月份类似,二级下拉框也应绑定`change`事件,但这次是监听月份的选择。当月份变化时,根据选定的年份和月份,生成正确的日期数组,并填充到三级下拉框(日期)中。同时,需要注意的是,每个月的第一天的选项值应为...

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

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

    基于layui开发的省市区三级联动下拉框.zip

    在这个项目中,当用户从第一级下拉框(省份)中选择一个省份时,第二级下拉框(城市)会自动更新对应省份的城市列表;同样,当用户在第二级下拉框选择一个城市后,第三级下拉框(区县)会展示该城市下的所有区县。...

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

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

    二级联动下拉框

    HTML部分可能包含两个`&lt;select&gt;`元素,分别代表一级和二级下拉框,每个`&lt;option&gt;`元素则表示具体的选项。JavaScript部分通常会监听第一个下拉框的`change`事件,当用户做出选择时,触发函数来更新第二个下拉框的内容...

Global site tag (gtag.js) - Google Analytics