jQuery Ajax三级联动
2015-01-03 13:41
218 查看
$.getJSON版
Javascript代码
$.ajax版
Javascript代码
Javascript代码
<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(bra 4000 nchId != "-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版
Javascript代码
<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>Html代码
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实现下拉框三级无刷新联动,且保存保持选中值状态
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- JQuery Ajax三级联动地区下拉框
- jQuery ajax实现省市县三级联动
- JQuery Ajax三级联动地区下拉框
- jquery ajax(2)-----获取省市县/区三级联动
- jquery ajax 三级联动
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- jquery Ajax调用asmx和ashx代码示例三级联动
- JQuery Ajax三级联动地区下拉框
- jquery ajax 下拉框三级无刷新联动,并保存保持选中值状态
- 基于github 开源框架Android-PickerView-master实现省市三级联动
- C#三级省市区ajax联动控件,利用UpdatePanel,以及页面取值
- JS省市区三级联动
- JS年月日三级联动下拉框日期选择代码
- 超好用的JS省市区三级联动
- PHP ajax 实现三级联动
- 二级联动 三级联动 多级联动