ajax实现城市三级联动 程序员文章站 2022-06-10 08:27:24 本文实例为大家分享了ajax实现城市三级联动的具体代码，供大家参考，具体内容如下在准备好服务器后html部分 本文实例为大家分享了ajax实现城市三级联动的具体代码，供大家参考，具体内容如下 在准备好服务器后 html部分 <div> <select name="" id="province"> <option value="">请选择省份</option> </select> <select name="" id="city"> <option value="">请选择城市</option> </select> <select name="" id="district"> <option value="">请选择区域</option> </select> </div> 样式部分 <style> div { text-align: center; } select { width: 150px; height: 30px; } </style> js部分 <script> var a = 0; var b = 0; var d=null; $.ajax({ type:'get', url:'http://127.0.0.1:6562/0929/area-json.js', success: function(data){ d = json.parse(data.slice(10,-1)); //获取json数据并转化为数组数据 $.each(d,function(index,ele){ $('<option value = ""></option>').appendto('#province').text(ele.name);//把省的数据插入列表中 }) } }) $('#province').on('change',function(e){ //当省变化时 $.ajax({ type:'get', url:'http://127.0.0.1:6562/0929/area-json.js', success: function(data){ d=json.parse(data.slice(10,-1)); a = e.target.selectedindex - 1; //当前下拉列表下标 if(a == -1){ $('#city').html('<option value="">请选择城市</option>'); $('#district').html('<option value="">请选择区域</option>'); }else{ $('#city').html('<option value="">请选择城市</option>'); $('#district').html('<option value="">请选择区域</option>'); if(d[a].children){ $.each(d[a].children,function(index,ele){ $('<option value = ""></option>').appendto('#city').text(ele.name); }) } } } }) }) $('#city').on('change',function(e){ //当市变化时 $.ajax({ type:'get', url:'http://127.0.0.1:6562/0929/area-json.js', success: function(data){ d=json.parse(data.slice(10,-1)); b = e.target.selectedindex - 1; if(b == -1){ $('#district').html('<option value="">请选择区域</option>'); }else{ $('#district').html('<option value="">请选择区域</option>'); if(d[a].children[b].children){ $.each(d[a].children[b].children,function(index,ele){ $('<option value = ""></option>').appendto('#district').text(ele.name); }) } } } }) }) </script> 全部代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script> <style> div { text-align: center; } select { width: 150px; height: 30px; } </style> </head> <body> <div> <select name="" id="province"> <option value="">请选择省份</option> </select> <select name="" id="city"> <option value="">请选择城市</option> </select> <select name="" id="district"> <option value="">请选择区域</option> </select> </div> <script> var a = 0; var b = 0; var d=null; $.ajax({ type:'get', url:'http://127.0.0.1:6562/0929/area-json.js', success: function(data){ d = json.parse(data.slice(10,-1)); $.each(d,function(index,ele){ $('<option value = ""></option>').appendto('#province').text(ele.name); }) } }) $('#province').on('change',function(e){ $.ajax({ type:'get', url:'http://127.0.0.1:6562/0929/area-json.js', success: function(data){ d=json.parse(data.slice(10,-1)); a = e.target.selectedindex - 1; if(a == -1){ $('#city').html('<option value="">请选择城市</option>'); $('#district').html('<option value="">请选择区域</option>'); }else{ $('#city').html('<option value="">请选择城市</option>'); $('#district').html('<option value="">请选择区域</option>'); if(d[a].children){ $.each(d[a].children,function(index,ele){ $('<option value = ""></option>').appendto('#city').text(ele.name); }) } } } }) }) $('#city').on('change',function(e){ $.ajax({ type:'get', url:'http://127.0.0.1:6562/0929/area-json.js', success: function(data){ d=json.parse(data.slice(10,-1)); b = e.target.selectedindex - 1; if(b == -1){ $('#district').html('<option value="">请选择区域</option>'); }else{ $('#district').html('<option value="">请选择区域</option>'); if(d[a].children[b].children){ $.each(d[a].children[b].children,function(index,ele){ $('<option value = ""></option>').appendto('#district').text(ele.name); }) } } } }) }) </script> </body> </html> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。 相关标签： ajax 三级联动 上一篇： pygame实现井字棋之第三步逻辑优化 下一篇： 网络基础-数据包 推荐阅读 微信小程序 ecshop地址三级联动实现实例代码 Laravel框架基于ajax实现二级联动功能示例 Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net PHP+JS三级菜单联动菜单实现方法 js三级联动下拉框怎么实现（前端三级联动实现代码） Android中使用开源框架Citypickerview实现省市区三级联动选择 jquery+ajax实现省市区三级联动效果简单示例 jQuery实现三级联动效果 原生JavaScript实现的简单省市县三级联动功能示例 jQuery使用EasyUi实现三级联动下拉框效果