LvMax
- 浏览: 145114 次
- 性别:
- 来自: 江门
-
文章分类
最新评论
-
hjl416148489：
三级联动演示下载：http://www.sucaihuo.co ...
jQuery Ajax三级联动
$.getJSON版
$.ajax版
<script type="text/javascript">
$(document).ready(function(){
var addSelOption = function(jq) //方法addSelOption : 为匹配对象添加一项"请选择"， jq ： jQuery对象
{
//创建option对象，并设置文本为"请选择"，value值为-1
var opt = $("<option/>").text("请选择").attr("value", "-1");
//将option对象添加到select中
jq.append(opt);
}
//获取请求的URL
var requestUrl = "/TheOneHRWeb/handler/GetBranchOne.aspx";
/*
通过 HTTP GET 请求载入 JSON 数据
json : JSON对象
*/
$.getJSON(requestUrl, function(json){
//遍历JSON对象
$(json).each(function(){
//创建option对象并设置相应的文本值和value值
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
//将option对象添加到匹配的jQuery对象中
$("#branchOne").append(opt);
});
});
$("#branchOne").change(function(){
//获取请求的URL
var requestUrl = "/TheOneHRWeb/handler/GetBranchTwo.aspx";
//获取下拉菜单的value值
var branchId = $(this).val();
if(branchId != "-1")
{
// {"branchID" : branchId} ： 传入参数
$.getJSON(requestUrl, {"branchID" : branchId}, function(json){
$("#branchTwo").empty();
//$("#branchTwo").append($("<option/>").text("请选择").attr("value", "-1"));
addSelOption($("#branchTwo"));
//遍历JSON对象
$(json).each(function(){
//创建option对象并设置相应的文本值和value值
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
//将option对象添加到匹配的jQuery对象中
$("#branchTwo").append(opt);
});
$("#branchTwo").change(function(){
//获取下拉菜单的value值
var branchId = $(this).val();
//获取请求的URL
var requestUrl = "/TheOneHRWeb/handler/GetBranchThird.aspx";
if(branchId != "-1")
{
$.getJSON(requestUrl, {"branchID" : branchId}, function(json){
$("#branchThree").empty();
addSelOption($("#branchThree"));
//遍历JSON对象
$(json).each(function(){
//创建option对象并设置相应的文本值和value值
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
//将option对象添加到匹配的jQuery对象中
$("#branchThree").append(opt);
});
});
}
else
{
$("#branchThree").empty();
addSelOption($("#branchThree"));
}
});
});
}
else
{
$("#branchTwo").empty();
addSelOption($("#branchTwo"));
$("#branchThree").empty();
addSelOption($("#branchThree"));
}
});
});
</script>
$.ajax版
<script type="text/javascript">
$(document).ready(function(){
var addSelOption = function(jq) //方法addSelOption : 为匹配对象添加一项"请选择"， jq ： jQuery对象
{
//创建option对象，并设置文本为"请选择"，value值为-1
var opt = $("<option/>").text("请选择").attr("value", "-1");
//将option对象添加到select中
jq.append(opt);
}
//添加span节点并添加loadding的gif图片
var loadImg = function(br){
$("#loaddingImg").find("img").remove();
var oSpan = $("<span id='loaddingImg'><img src='/TheOneHRWeb/images/loadding_indicator.gif' /></span>");
br.after(oSpan);
}
var requestUrl = "/TheOneHRWeb/handler/GetBranchOne.aspx";
$.ajax({
//type : "get", //默认为get
dataType : "json",
url : requestUrl,
success : function(json){
$(json).each(function(){
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
$("#branchOne").append(opt);
});
$("#branchOne").change(function(){
var branchId = $(this).val();
if(branchId != "-1"){
var requestUrl = "/TheOneHRWeb/handler/GetBranchTwo.aspx";
$.ajax({
dataType : "json",
url : requestUrl,
//传入的参数
data : "branchID=" + branchId,
//发送请求前加载loadding的gif图片
beforeSend : loadImg($("#branchOne")),
success : function(json){
//删除gif图片的span节点
$("#loaddingImg").remove();
$("#branchTwo").empty();
addSelOption($("#branchTwo"));
$(json).each(function(){
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
$("#branchTwo").append(opt);
});
}
});
}
else{
$("#branchTwo").empty();
addSelOption($("#branchTwo"));
$("#branchThree").empty();
addSelOption($("#branchThree"));
}
});
$("#branchTwo").change(function(){
var branchId = $(this).val();
if(branchId != "-1"){
var requestUrl = "/TheOneHRWeb/handler/GetBranchThird.aspx";
$.ajax({
dataType : "json",
url : requestUrl,
data : "branchID=" + branchId,
beforeSend : loadImg($("#branchTwo")),
success : function(json){
$("#loaddingImg").remove();
$("#branchThree").empty();
addSelOption($("#branchThree"));
$(json).each(function(){
var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);
$("#branchThree").append(opt);
});
}
});
}
else{
$("#branchThree").empty();
addSelOption($("#branchThree"));
}
});
}
});
});
</script>
I级机构: <select id="branchOne">
<option selected="selected" value="-1">请选择</option>
</select>
II级机构:<select id="branchTwo">
<option selected="selected" value="-1">请选择</option>
</select>
III级机构:<select id="branchThree">
<option selected="selected" value="-1">请选择</option>
</select>
分享到：
发表评论
相关推荐
在三级联动中，jQuery主要负责监听用户的选择事件，并触发Ajax请求。 接下来是AJAX（异步JavaScript和XML），它允许Web应用在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在三级联动中，每当用户...
综上所述，实现“jQuery各种插件和JQuery Ajax三级联动地区下拉框”涉及到jQuery库、插件开发、AJAX交互、DOM操作和性能优化等多个方面。这个功能不仅实用，而且对于学习和理解JavaScript和jQuery的深入使用非常有...
这个"jquery+php+mysql省市县Ajax三级联动代码"是实现这种功能的一个实例，结合了前端JavaScript库jQuery、后端PHP编程语言以及MySQL数据库。下面我们将详细探讨这个技术组合在实现三级联动中的应用。 首先，jQuery...
在网页开发中，"Jquery实现ajax三级联动"是一个常见的需求，主要用于动态更新页面内容，如下拉框的联动选择。这种技术可以提高用户体验，减少不必要的页面刷新。在这个场景中，我们将探讨如何利用jQuery和Ajax技术...
总之，实现Ajax三级联动的关键在于利用JavaScript和Ajax技术进行动态数据交互，通过监听用户的选择事件，动态加载并更新下拉菜单选项。这一过程涉及前端与后端的紧密协作，以提供流畅、无刷新的交互体验。
### Ajax与jQuery在省市县三级联动中的应用 #### 一、Ajax简介 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，...
本示例中的"jquery省市三级联动.rar"是一个使用jQuery实现的省市三级联动效果的示例代码。这个功能常用于网页上的地址选择，用户在选择省份后，下拉菜单会自动更新为对应省份的城市，接着选择城市后，再次更新为该...
通过以上步骤，我们就可以实现一个基于jQuery和Ajax的三级省市联动效果。值得注意的是，为了优化用户体验，可以添加一些错误处理和加载指示器，同时考虑异步请求失败的情况。此外，还可以使用Promise或async/await...
在Web开发中，"Ajax JavaWeb JS 三级联动"是一个常见的功能需求，它涉及到前端JavaScript技术、后端JavaWeb服务以及Ajax异步通信。这个功能主要用于创建交互性强的下拉菜单，通常用于地区选择、商品分类等场景，用户...
本主题将深入探讨如何使用jQuery实现一个日期三级联动的效果，这是一个常见于用户输入生日或其他时间信息的功能。 一、jQuery基础 jQuery的核心在于其简洁的语法，例如选择元素、操作DOM（文档对象模型）以及处理...
Ajax三级联动是指在网页中，通常在下拉框中，当用户选择一级选项时，根据一级选项的数据动态加载二级选项；接着，选择二级选项后，再加载对应的三级选项。这种联动效果常见于地区选择、商品分类等场景，能够高效地...
本例主要探讨如何使用jQuery实现三级联动效果。 首先，我们来看HTML部分。HTML代码定义了三个`<select>`元素，分别代表“大类”、“属类”和“小类”。每个`<select>`都有一个对应的`onchange`事件，当用户更改选项...
"jquery 版三级联动"是指利用jQuery实现的一种交互效果，常见于下拉菜单或者地区选择器等场景，用户选择每一级选项时，下一级的选择会根据当前选择动态更新。这种功能在网页设计中很常见，可以提高用户体验。 在...
在本项目中，“ajax三级联动菜单”利用Ajax实现了动态的、多级关联的下拉菜单功能。这种功能常见于网站的地区选择、商品分类等场景，用户在选择某一选项时，下一级菜单会根据前一级的选择自动更新，提供更加精确的...
本文将深入探讨“可初始化值的jQuery省市三级联动插件”，这是一个能够帮助开发者实现动态选择省份、城市和区县的交互功能，并且能够预先设置默认值的插件。 首先，我们需要理解什么是“联动”或者“级联选择”。在...
在网页开发中，"ajax三级联动"是一种常见的交互设计，主要应用于下拉菜单或选择框，如城市选择，其中包含省、市、区三个级别。这种功能能够为用户提供流畅的体验，无需每次选择都刷新整个页面，提高了网页的响应速度...
在网页开发中，"Ajax三级联动 省市区" 是一种常见的交互设计，它利用Ajax技术实现省份、城市、区县三个级别的下拉菜单联动效果。这种设计在用户填写地址或者选择区域时提供了便捷的用户体验，用户只需选择一个级别，...