`

用jquery结合json做一个二级联动下拉菜单

    博客分类:
  • ajax
阅读更多
本文和之前jquery返回json那篇一样,第二级下拉菜单使用dom方式

<script type="text/javascript">
$(document).ready(function(){
var obj=$("#category");
if(typeof obj != 'undefined' && obj !=''){
	showGongdanType(obj.val());
}
});
function onchangeShow(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category},
type : "post",
cache : false,
dataType : "json",
success:onchangecallback
});
}
function onchangecallback(data){ 
    var select_root=document.getElementById('type');
    select_root.options.length=0;
    select_root.add(new Option("全部",''));
    for(var i=0;i<data.length;i++){
    		var xValue=data[i].value;
             var xText=data[i].valueName;
             var option=new Option(xText,xValue);
             select_root.add(option);
    }
}
function showGongdanType(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category},
type : "post",
cache : false,
dataType : "json",
success:callback
});
}
function callback(data){ 
    var select_root=document.getElementById('type');
    select_root.options.length=0;
    select_root.add(new Option("全部",''));
    for(var i=0;i<data.length;i++){
    		var xValue=data[i].value;
             var xText=data[i].valueName;
             var option=new Option(xText,xValue);
             select_root.add(option);
    }
    if("${gongdanType}"!=''){
    	for(var i=0;i<data.length;i++){
    		if(data[i].value=="${gongdanType}")
    		select_root.selectedIndex=i+1;
    	}
    }
}
</script>

			<td width="10%" height="25" class="alignLeft">
				统计类别:
			</td>
			<td width="10%" valign="top" class="alignLeft">
					<s:select name="form.category" list="categorys" id="category"
						listKey="value" listValue="valueName" 
						onchange="onchangeShow(this.value)">
					</s:select>
			</td>
			<td width="10%" height="25" class="alignLeft">
				工单类型:
			</td>
			<td width="10%" valign="top" class="alignLeft">
			 <select name="form.gongdanType" id="type" >
   			</select>	
</td>

分享到:
评论
1 楼 flyingpig4 2010-02-25  
想跟你请教一下:SSH+JQuery的整合
我的邮箱是flyallen5@hotmail.com
谢谢

相关推荐

    二级联动下拉菜单实例

    以下是一个简单的jQuery实现二级联动下拉菜单的示例: ```html 请选择 &lt;!-- 一级菜单选项 --&gt; 请选择 &lt;!-- 二级菜单选项 --&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; $...

    联动下拉菜单(jQuery+JSON)

    标题中的“联动下拉菜单(jQuery+JSON)”是指一种常见的前端交互设计,它涉及到JavaScript库jQuery的使用,以及数据格式JSON在动态构建下拉菜单中的应用。这种设计通常用于多级选择场景,如地区选择、类别筛选等,...

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

    在网页设计中,二级联动下拉菜单是一种常见的交互元素,常用于分类选择或者地区筛选等场景。这种功能的实现通常涉及到前端和后端的交互,其中PHP作为后端语言,负责处理数据并返回给前端。本篇文章将详细介绍如何...

    基于jquery+json的通用三级联动下拉列表.rar

    本示例"基于jquery+json的通用三级联动下拉列表"就是一种实现这种功能的方法,它结合了jQuery库的灵活性和JSON数据格式的强大。 **jQuery** 是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax...

    jQuery世界城市三级联动下拉选择代码

    这个"jQuery世界城市三级联动下拉选择代码"是一个实现这种功能的示例,它允许用户通过三个相互关联的下拉列表来选择全球的国家、省份(或州)以及城市。 首先,`jquery.min.js`是jQuery库的核心文件,它是...

    jQuery json省市区街道四级联动地址选择插件

    **jQuery JSON 省市区街道四级联动地址选择插件** 在网页开发中,尤其是在电子商务网站或者需要用户填写详细地址的应用中,四级联动地址选择插件是一个常见且实用的功能。它通常包括省、市、区(县)和街道四个级别...

    jquery和json加PHP实现的二级联动

    6. **JavaScript处理**:在jQuery代码中,我们需要定义一个函数来处理Ajax请求的回调,将返回的JSON数据解析后,动态创建并添加到二级菜单的`&lt;option&gt;`元素中。此外,还需要确保在页面加载时,正确初始化一级菜单的...

    二级联动json

    在这个场景中,"二级联动json"指的是使用JSON数据来驱动二级联动下拉菜单的插件。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在二级联动中,...

    jQuery json省市区街道四级联动地址选择插件.zip

    总的来说,jQuery JSON省市区街道四级联动地址选择插件通过结合jQuery的强大功能和JSON的简洁数据格式,为网页开发提供了一个高效、易用的地址选择解决方案。它既满足了功能需求,又提供了良好的用户体验,是开发者...

    jquery二级联动下拉列表

    在提供的压缩包文件中,可能包含了一个名为"二级联动下拉菜单.html"的HTML文件,以及一个"js"文件,它们应该包含了实现上述功能的代码。通过打开HTML文件并查看源代码,你可以看到实际的DOM结构和JavaScript实现。这...

    基于jquery+json的通用四级联动下拉列表.zip

    在IT领域,尤其是在Web开发中,"基于jquery+json的通用四级联动下拉列表"是一个常见的功能需求。这个压缩包文件包含的资源很可能是用于实现这样一个功能的代码示例或框架。下面,我们将深入探讨这一主题,理解其背后...

    jquery select二级联动菜单

    本话题主要关注的是使用jQuery实现的二级联动下拉菜单,这是一种常见的交互设计,常用于网站的筛选或导航功能。下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先,联动菜单的基本概念是...

    JQuery中国省市区街道三级、四级联动下拉菜单插件

    封装JQuery插件,中国省市区三级联动下拉菜单,省市区街道四级联动下拉菜单插件,三级插件取的值为地区编号或地区名,四级插件默认为地区编号,修改jquery.citys.js中的valueType为“name”,街道单独在代码中修改...

    jQuery四级联动下拉菜单代码.zip

    在本资源"jQuery四级联动下拉菜单代码.zip"中,我们将会探讨如何使用jQuery实现四级联动的下拉菜单,这是一种常见于网站导航栏或表单中的交互设计。 首先,`index.html`是网页的主文件,它包含了HTML结构,其中会...

    struts2 jquery json ajax 三级联动菜单

    综上所述,这个项目展示了如何使用Struts2作为后端控制器,jQuery处理前端交互,Ajax实现异步数据传输,以及JSON作为数据交换格式,共同构建一个功能完善的三级联动菜单。开发者需要对这些技术有深入理解,才能有效...

    jQuery input点击文本框三级联动下拉菜单代码

    通过以上步骤,我们可以成功地使用jQuery实现一个输入文本框的三级联动下拉菜单功能。需要注意的是,实际应用中数据通常需要从服务器获取,这里为了简化示例,数据是预设的。在实际项目中,你需要根据实际情况调整...

    jQuery模拟select下拉框三级城市联动代码.zip

    这个"jQuery模拟select下拉框三级城市联动代码.zip"压缩包提供的就是一个使用jQuery库来实现这种效果的示例。这里我们将深入探讨相关知识点。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...

    ASP+JS三级联动下拉菜单[调用数据库数据]

    在三级联动下拉菜单中,当用户在第一级菜单中选择一个选项时,JavaScript会通过AJAX(Asynchronous JavaScript and XML)发送请求到服务器,获取相应的第二级菜单数据,然后在页面上动态更新。例如,使用jQuery库,...

    ajax使用jquery json实现的省市县三级联动经验总结

    通过Ajax结合jQuery和JSON,可以有效地实现省、市、县三级联动功能,不仅提升了用户体验,也优化了前后端数据交互过程。在实际项目中,开发者可以根据具体需求调整代码逻辑,如增加错误处理、优化数据展示等,进一步...

Global site tag (gtag.js) - Google Analytics