jQuery Ajax三级联动

最新推荐文章于 2022-11-27 11:08:33 发布
原创 最新推荐文章于 2022-11-27 11:08:33 发布 · 550 阅读 · 0 ·
CC 4.0 BY-SA版权
本文为博主(凯)原创文章，转载请注明出处。
文章标签：

#jquery

本文介绍如何使用jQuery实现三级级联下拉框功能，包括通过HTTP GET请求加载JSON数据并动态更新下拉框选项。同时展示了两种实现方式：$.getJSON与$.ajax。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

$.getJSON版

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(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版
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实现省市区三级联动（附效果图+数据库）
NaMgAl_的博客
01-09 3万+
一、效果图 1、页面加载后（初始化：北京市-北京市-东城区） 2、单击选择省份后（改变成：河北省-石家庄市-长安区） 二、jsp页面 省市区三级联动 $(function() { // 初始化省市区 initAddress(); // 更改省份后的操作 $("select[name='province']").change(func
用jquery的ajax方法实现三级联动
dwill08的博客
10-31 2774
(function(){ var p = $('#province');//得到省份的select对象 var c = $('#city');//得到城市的select对象 var t = $('#town');//得到地区的select对象 $.ajax({//使用$.ajax()访问服务器 type:"get",//get类型访问 url:"ajax\/gys",//地址 a
Jquery实现ajax三级联动
03-17
Jquery实现ajax三级联动
jQuery （Ajax三级联动）
waz929的博客
09-21 466
1. jackson Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象 核心代码： ObjectMapper mapper = new ObjectMapper(); mapper.writeValueAsString(obj); int count =...
jQuery ajax实现三级联动
y328771518的博客
02-28 338
使用表格布局方式 &lt;table &gt; &lt;tr&gt; &lt;td style="width:80px;"&gt;运营商名称：&lt;/td&gt; &lt;td&gt; &lt;select id="select_yys" "&gt;&lt;/select&gt;
Jquery/AJAX实现三级联动
listeningdu的博客
11-27 346
ajax异步交互实现三级联动
jQuery Ajax版省市三级联动
qbb的博客
09-21 371
嘿嘿，小白今天给大家带来一个jQuery里面的 ajax版的省市三级联动 首先我们需要了解下    jackson     Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象    和xml文档，同样也可以将json、xml转换成Java对象     核心代码：    ObjectMapper mapper = new ObjectMappe...
jquery ajax 三级联动
01-21
在三级联动中，jQuery主要负责监听用户的选择事件，并触发Ajax请求。 接下来是AJAX（异步JavaScript和XML），它允许Web应用在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在三级联动中，每当用户...
Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动
04-19
综上所述，实现“jQuery各种插件和JQuery Ajax三级联动地区下拉框”涉及到jQuery库、插件开发、AJAX交互、DOM操作和性能优化等多个方面。这个功能不仅实用，而且对于学习和理解JavaScript和jQuery的深入使用非常有...
实现ASP.NET下JQuery Ajax三级联动的技巧
### 标题知识点：jquery ajax 三级联动 **jquery ajax 的概念**： AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。而jQuery是JavaScript的一个快速、小巧...
Jquery+Ajax+XML实现国家、省、市的三级联动
Top_xin的专栏
08-23 1800
Jquery+Ajax+XML实现国家、省、市的三级联动 html页面： 所在国家： 所在地区： xml文件：
JQuery+Ajax实现三级联动
Bruce_Json的博客
03-18 388
年级：<select name="gradecode"></select> 班级：<select name="classcode"></select> 姓名：<select name="studentno"></select> $(function() { // 初始化年...
Jquery+Ajax实现3级联动
风泊月
02-07 1446
1.需要将省市县这些地区的数据表导入到数据库内，已经添加到附件可以查看2.这是一个成型的demo，界面非常简单 select组件即可3.准备后台数据，这里用到了Gson(),有兴趣也可以了解一下fastJson()更快更方便的处理Json数据4.关键代码//设置响应编码格式 resp.setContentType("text/html;charset=utf-8"); resp.set...
《jQuery的ajax及+json实现三级联动》
ZYJL的博客
09-21 892
1. jackson Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象 和xml文档，同样也可以将json、xml转换成Java对象 核心代码： ObjectMapper om = new ObjectMapper(); mapper.writeValueAsString(obj); int count = metaData.getColumnC...
jquery实现页面显示实时时间
shhider的专栏
10-10 4314
直接上代码，相信大家都能看懂的。 startTime(); function startTime() { var today = new Date(); var y = today.getFullYear(); var M = today.getMonth()+1; var d = today.getDate();
50个 JQuery 使用技巧
mallven.com
08-14 502
感谢：[url]http://www.woiweb.net/50-jquery-snippets-for-developers.html[/url] 1. 如何创建嵌套的过滤器： [code="java"] //允许你减少集合中的匹配元素的过滤器， //只剩下那些与给定的选择器匹配的部分。在这种情况下， //查询删除了任何没（:not）有（:has） //包含class为“sele...
jquery ajax实现省市区三级联动
sj2017的博客
09-23 2765
<select id="province"> <option>选择省份</option> </select> <select id="city"> <option>选择城市</option> </select> <select id="district"> <option>选择区域</option> </select
JQuery+ajax实现省市区三级联动（附：补充代码内容）
tao_fuli的博客
10-28 4184
省市区三级联动的实现（附：补充代码） 有了下面的代码，别忘了导入需要的jar包，用到的jar包到网上都能找到。 如果觉得不错，就点个赞！谢谢观望！！ ##  1.效果图   ##  2.jsp页面，novel.jsp &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodin...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值