`
bj_liuhuibin
  • 浏览: 21379 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JQUERY 应用AJAX实现下拉列表框三级联动

阅读更多
//移除option中的值
function removeOp(selectId){ 
var op = $("#"+selectId).children();
if(op.length>1){
   for(var i=0;i<op.length;i++)
   {
   if(i>=1){
document.getElementById(selectId).removeChild(op[i]);
   }
   }
}
}
//三级下拉列表框的联动js
//读出第二级的数据
$(function() {
$("#selectName1").change(function() {
var selectName1 = $("#selectName1").val();
removeOp("selectName2");
removeOp("selectName3");
if(selectName1=="") return ;
$.ajax(
{
url:"${path}/name/path_getAjaxResult.do",
type:"post",
dataType:"json",  //接受数据格式
data:"selectName1="+selectName1,
error:
function(){alert("请求失败!");},
success:
function(data){
if(data!=null && data!=""){
var str="";
for(var i=0;i<data.length;i++){
str+="<option value='"+data[i].id+"'>"+data[i].name+"</option>"
}
$(str).appendTo($("#selectName2")); 
}
}
});
});
});
//读出第三级的数据
$(function() {
$("#selectName2").change(function() {
var selectName2 = $("#selectName2").val();
removeOp("selectName3");
if(selectName2=="") return ;
$.ajax(
{
url:"${path}/name/path_getAjaxResult.do",
type:"post",
dataType:"json",  //接受数据格式
data:"selectName2="+selectName2,
error:
function(){alert("请求失败!");},
success:
function(data){
if(data!=null && data!=""){
var str="";
for(var i=0;i<data.length;i++){
str+="<option value='"+data[i].erid+"'>"+data[i].erName+"</option>"
}
$(str).appendTo($("#selectName3"));
}
  }
});
});
});


//jsp部分
<table>
   <tr>
<td height="30" >分类:</td>
<td>
<select  style="width: 120px;"  name="selectName1" id="selectName1">
<option value="">--一级分类--</option>
<option value="1"/>">name1</option>
    <option value="2"/>">name2</option>
<option value="3"/>">name3</option>
<option value="4"/>">name4</option>
</select>&nbsp;
<select  style="width: 120px;"  name="selectName2" id="selectName2">
<option value="">--二级分类--</option>

</select>&nbsp;
<select  style="width: 120px;"  name="selectName3" id="selectName3">
<option value="">--三级分类--</option>
</select>&nbsp;
</td>
     </tr>

</table>

//struts2 Action 中AJAX方法
public String getAjaxResult(){
request=ServletActionContext.getRequest();

String selectName1=request.getParameter("selectName1");
String selectName2=request.getParameter("selectName2");

if(selectName1=null && !"".equals(selectName1)){
   //根据selectName1去取得二级下拉列表数据Object数组resultList
}
if(selectName2=null && !"".equals(selectName2)){
    //根据selectName2去取得三级下拉列表数据Object数组resultList
}

//resultList为Object对象数组或者是Map数组
List list=resultList;

        //返回数据类型
return "json";
}

//struts2 struts-config.xml

<package name="name" namespace="/name" extends="struts-default,json-default">
<action name="path_*" method="{1}" class="className">
<result name="json" type="json">
<param name="root">list</param>
</result>
</action>
</package>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

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

    本项目“ajax+json+ashx实现下拉列表三级联动”旨在利用jQuery、Ajax以及ASHX处理程序来创建这样一个功能。 首先,jQuery是一个强大的JavaScript库,它的易用性和丰富的API使得处理DOM操作、事件绑定、动画效果以及...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

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

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

    php+ajax+mysql省市县三级联动(1张数据库).zip

    这个"php+ajax+mysql省市县三级联动"的资源提供了一个基于PHP、Ajax和MySQL实现的示例,它可以帮助初学者理解如何在实际项目中应用这些技术。以下是对这个资源涉及的知识点的详细解释: 1. **PHP**: PHP是一种广泛...

    三级联动下拉列表框(SELECT)jquery插件(js 三级联动) php版

    总的来说,这个项目利用了jQuery的事件处理和DOM操作能力,结合PHP服务器端处理,通过AJAX实现了一个三级联动的下拉列表框。在实际应用中,这样的功能对于减少页面刷新,提升用户体验有着显著作用。开发人员可以通过...

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

    ### Ajax与jQuery在省市县三级联动中的应用 #### 一、Ajax简介 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,...

    jquery结合ajax和xml实现省市县三级联动

    综上所述,通过 jQuery 实现事件监听和 DOM 操作,使用 AJAX 进行异步数据请求,结合 XML 进行数据解析,我们可以高效地实现省市县三级联动的功能。这在现代 web 开发中是一个基础且实用的技能,能够提供流畅的用户...

    jquery+ajax+json省市区三级联动

    这里我们探讨的主题是“jquery+ajax+json省市区三级联动”,这个功能利用jQuery库的便捷性,结合AJAX异步数据交换,以及JSON数据格式来实现动态地加载和更新省市区的选项。 首先,jQuery是一个强大的JavaScript库,...

    Jquery实现ajax三级联动

    在网页开发中,"Jquery实现ajax三级联动"是一个常见的需求,主要用于动态更新页面内容,如下拉框的联动选择。这种技术可以提高用户体验,减少不必要的页面刷新。在这个场景中,我们将探讨如何利用jQuery和Ajax技术...

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

    综上所述,实现“jQuery各种插件和JQuery Ajax三级联动地区下拉框”涉及到jQuery库、插件开发、AJAX交互、DOM操作和性能优化等多个方面。这个功能不仅实用,而且对于学习和理解JavaScript和jQuery的深入使用非常有...

    jquery 通用三级联动下拉列表.rar

    , 用Jquery实现的三级联动下拉列表插件,压缩包内有多个不同的版本,其实现的基本原理大同小异,无非是调用方式的不同,第一个是通过读取XML构建,支持IE/firefox,chrome不支持,XML部分可以改成AJAX的方式,这样...

    Ajax+jQuery实现省市区三级联动功能

    在网页开发中,"Ajax+jQuery实现省市区三级联动功能"是一个常见的需求,尤其是在构建具有交互性和动态更新的用户界面时。这个功能的核心是通过Ajax技术异步获取数据,并使用jQuery库来处理DOM操作和事件监听,使得...

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

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

    ajax 下拉列表联动

    在传统的网页中,如果需要用户选择省、市、县三级地址,通常需要三个独立的下拉列表,并且在用户改变任一上级选项时,需要手动刷新整个页面来获取新的下拉列表数据。而通过AJAX,我们可以实现这些下拉列表的联动,即...

    下拉列表 js三级联动

    以上就是使用JavaScript实现下拉列表三级联动的基本步骤。在实际应用中,可能还需要考虑其他因素,如错误处理、异步数据加载优化、用户体验改进等。通过这种方式,我们可以为用户提供更加智能化和流畅的交互体验,...

    JQuery实现无刷新省市三级联动

    实现省市三级联动的核心思路是:当用户在一级(省)列表中选择一个选项时,通过Ajax异步请求获取对应省的二级(市)数据,并动态填充到市的选择框;同理,当用户在市的选择框中选择后,再获取对应的三级(区/县)...

    jquery_ajax_php_三级联动.rar

    本项目“jquery_ajax_php_三级联动.rar”显然关注的是如何利用这些技术实现一个三级联动的效果,这是一种常见的交互设计,常用于下拉菜单、地区选择等场景,让用户能够按层次逐级选择。下面我们将详细探讨这些知识点...

    无限级、无刷新、联动下拉列表框

    在IT领域,尤其是在Web开发中,"无限级、无刷新、联动下拉列表框"是一种高效且用户体验良好的设计模式。这种技术通常应用于大型数据结构,如层级数据或分类系统,例如组织架构、地区层级或者产品分类等。在ASP.NET...

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

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

Global site tag (gtag.js) - Google Analytics