省份,城市,地区的三级联动

最新推荐文章于 2023-07-11 09:21:45 发布
最新推荐文章于 2023-07-11 09:21:45 发布
阅读量877 收藏 1
点赞数
分类专栏： 省份 城市 地区的三级联动 文章标签： 省份 城市 地区的三级联动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L__MY/article/details/90723253
版权

这里只介绍页面的代码和控制层代码

<script type="text/javascript">
$(function(){
 $.post(
  "toadd2",
  {},
  function(obj){
   var minzus = obj.minzus;
   var citys = obj.citys;
   
   for(var i in minzus){
    $("[name='mid']").append("<option value='"+minzus[i].mid+"'>"+minzus[i].mname+"</option>");
   }
   for(var i in citys){
    $("[name='sheng_id']").append("<option value='"+citys[i].id+"'>"+citys[i].name+"</option>");
   }
  },
  "json"
 );
})

function sheng(id){
 $.post(
  "citys", 
  {id:id},
  function(obj){
   $("[name='shi_id']").empty();//每次追加清空
   //追加一条请选择
   $("[name='shi_id']").append("<option value=''>请选择</option>");
   $("[name='qu_id']").empty();//每次追加清空
   //追加一条请选择
   $("[name='qu_id']").append("<option value=''>请选择</option>");
   for(var i in obj){
    $("[name='shi_id']").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
   } 
  },
  "json"
 );
}


function shi(id){
 $.post(
  "citys", 
  {id:id},
  function(obj){
   $("[name='qu_id']").empty();//每次追加清空
   //追加一条请选择
   $("[name='qu_id']").append("<option value=''>请选择</option>");
   for(var i in obj){
    $("[name='qu_id']").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
   } 
  },
  "json"
 );
}
</script>

<body>
<marquee>欢迎来到新增页面</marquee>
<center>
<form>
姓名:<input type="text" name="sname"><br>
性别:<input type="text" name="sex"><br>
地址:<input type="text" name="addr"><br>
名族:<select name="mid">
    <option value="">请选择</option>
    </select><br>
省:<select name="sheng_id" onchange="sheng(this.value)">
    <option value="">请选择</option>
    </select><br>
市:<select name="shi_id" onchange="shi(this.value)">
    <option value="">请选择</option>
    </select><br>
区:<select name="qu_id">
    <option value="">请选择</option>
    </select><br>
<input type="button" value="提交"><br>
</form>
</center>
</body>

控制层代码

 @RequestMapping("/toadd2")
  @ResponseBody
  public Object toadd2() {
   //查询两个部分 民族和省份
   List<Minzu> minzus = ss.getMinzu();
   int id=1;
   List<City> citys = ss.getCity(id);
   Map<String,Object> map = new HashMap();
   map.put("minzus", minzus);
   map.put("citys", citys);
   return map;
  }


 @RequestMapping("/citys")
  @ResponseBody
  public Object citys(int id) {
   List<City> citys = ss.getCity(id);
   return citys;
  }
LMY____梦阳� � �
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery+Ajax实现省市区三级联动（附效果图+数据库）
NaMgAl_的博客
01-09 3万+
一、效果图 1、页面加载后（初始化：北京市-北京市-东城区） 2、单击选择省份后（改变成：河北省-石家庄市-长安区） 二、jsp页面 省市区三级联动 $(function() { // 初始化省市区 initAddress(); // 更改省份后的操作 $("select[name='province']").change(func
省市区三级联动
xinyinaini的博客
08-07 1256
省市区三级联动
java实现省市区三级联动
最新发布
百创科技
07-11 2857
我的想法很简单 ，可能想的有点少，首先遍历省份，当数据发生改变调用方法请求根据省的id去查询市区的信息，当市区信息发生改变调用另一个方法去查询县区的信息。，（个人觉得两个接口层公用一个也行，就像那种公用一个的改为mapper接口层那种的也很方便，可能这样比较不规范吧）6、最后映射页面：jsp。
省份城市的三级联动
da_yu_hai_tang的博客
02-09 3941
省份城市的三级联动 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> select{ width: 80px; margin: 5px; ...
实现省市区三级联动
rmh1314520的博客
06-26 1255
省市区三级联动实现的主要步骤 通过接口获取省份信息 使用js获取省市区下拉框元素 将服务器返回的省份信息显示到下拉框中 为下拉框元素添加表单值改变事件（onchange） 当省份下拉框值改变时，根据省份id获取城市信息 同理当城市下拉框值改变时，根据城市id获取县城信息 省市区联动.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框输入
JavaScript实现省份城市的三级联动
10-15
JavaScript实现的省份城市三级联动是一种常见的前端交互功能，主要用于地理信息的选择，如用户在填写地址时选择所在的省、市、区。在这个例子中，我们通过JavaScript动态创建HTML的`<select>`元素，并根据用户在上级...
全球国家，省份，城市 三级联动
04-16
总的来说，“全球国家，省份，城市”的三级联动数据集涉及到了数据的获取、存储、处理、展示等多个环节，涵盖了编程、数据库、网络通信、用户体验等多个IT领域的知识。理解和掌握这些知识点，对于开发出高效、用户...
省份城市区县_下拉框三级联动选择
11-14
在IT行业中，尤其是在网页开发和前端交互设计领域，"省份城市区县_下拉框三级联动选择"是一种常见的用户界面设计模式。这种设计主要用于让用户在输入地址或选择地理位置时，通过三个相互关联的下拉框依次选取省份、...
js全国城市三级联动
07-25
js全国城市三级联动
2018最新省市县三级联动(截止2018年9月31日)
10-29
之前从网上找的三级联动都太老了,数据也都是很久之前的数据，所以自己把从国家统计局扒下来的省市县三级联动数据做了整理，目前最新的三级联动，童叟无欺。大家看北京市和天津市的几个分区就知道是最新的了。 INSERT INTO `address` VALUES (1, '110000', 0, '北京市', 1); INSERT INTO `address` VALUES (2, '110100', 110000, '市辖区', 2); INSERT INTO `address` VALUES (3, '110101', 110100, '东城区', 3); INSERT INTO `address` VALUES (4, '110102', 110100, '西城区', 3); INSERT INTO `address` VALUES (5, '110105', 110100, '朝阳区', 3); INSERT INTO `address` VALUES (6, '110106', 110100, '丰台区', 3); INSERT INTO `address` VALUES (7, '110107', 110100, '石景山区', 3); INSERT INTO `address` VALUES (8, '110108', 110100, '海淀区', 3); INSERT INTO `address` VALUES (9, '110109', 110100, '门头沟区', 3); INSERT INTO `address` VALUES (10, '110111', 110100, '房山区', 3); INSERT INTO `address` VALUES (11, '110112', 110100, '通州区', 3); INSERT INTO `address` VALUES (12, '110113', 110100, '顺义区', 3); INSERT INTO `address` VALUES (13, '110114', 110100, '昌平区', 3); INSERT INTO `address` VALUES (14, '110115', 110100, '大兴区', 3); INSERT INTO `address` VALUES (15, '110116', 110100, '怀柔区', 3); INSERT INTO `address` VALUES (16, '110117', 110100, '平谷区', 3); INSERT INTO `address` VALUES (17, '110118', 110100, '密云区', 3); INSERT INTO `address` VALUES (18, '110119', 110100, '延庆区', 3); INSERT INTO `address` VALUES (19, '120000', 0, '天津市', 1); INSERT INTO `address` VALUES (20, '120100', 120000, '市辖区', 2); INSERT INTO `address` VALUES (21, '120101', 120100, '和平区', 3); INSERT INTO `address` VALUES (22, '120102', 120100, '河东区', 3); INSERT INTO `address` VALUES (23, '120103', 120100, '河西区', 3); INSERT INTO `address` VALUES (24, '120104', 120100, '南开区', 3); INSERT INTO `address` VALUES (25, '120105', 120100, '河北区', 3); INSERT INTO `address` VALUES (26, '120106', 120100, '红桥区', 3); INSERT INTO `address` VALUES (27, '120110', 120100, '东丽区', 3); INSERT INTO `address` VALUES (28, '120111', 120100, '西青区', 3); INSERT INTO `address` VALUES (29, '120112', 120100, '津南区', 3); INSERT INTO `address` VALUES (30, '120113', 120100, '北辰区', 3); INSERT INTO `address` VALUES (31, '120114', 120100, '武清区', 3); INSERT INTO `address` VALUES (32, '120115', 120100, '宝坻区', 3); INSERT INTO `address` VALUES (33, '120116', 120100, '滨海新区', 3); INSERT INTO `address` VALUES (34, '120117', 120100, '宁河区', 3); INSERT INTO `address` VALUES (35, '120118', 120100, '静海区', 3); INSERT INTO `address` VALUES (36, '120119', 120100, '蓟州区', 3);
js实现省份城市联动
06-16
好东西,值得大家的下载....... 多多关注哈.
中国行政区划数据：省份、城市、区县。中国省市区镇三级联动地址数据。城市经纬度数据。
07-12
[1/1] 正在抓取位置信息... [1/3317] 当前： 北京市 {"lng":116.39564503787867,"lat":39.92998577808024} [2/3317] 当前： 天津市 {"lng":117.21081309155257,"lat":39.143929903310077} [3/3317] 当前： 河北省 {"lng":115.66143362422224,"lat":38.61383974925108} [4/3317] 当前： 山西省 {"lng":112.51549586383865,"lat":37.86656599050925} [5/3317] 当前： 内蒙古自治区 {"lng":114.41586754816612,"lat":43.46823822194904}
另外一种比较常见的地区联动插件city-picker
06-12
效果描述： 很简单好用的一个jQuery插件 可以实现省市县联动效果 此类特效很多，这算是一个额外的选择吧 使用方法： 1、将CSS中的样式拷贝到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
世界级地区三级联动sql
06-26
世界级地区三级联动数据库sql，包括建表语句等支持直接导入MySql
三级省市联动
QAQwin的博客
08-03 807
简单的三级城市联动（或称省级联动）一看就懂的简单js编程
js省级联动
aimaonu2505的博客
02-16 1750
1.webform页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Sslt.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http...
省份城市区县三级联动html代码,全国城市三级联动 示例源码(省市县)
06-03
省份城市区县三级联动示例 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 省份： ()"> 请选择省份 城市： ()"> 请选择城市 区县： 请选择区县 $(document)....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值