文档章节

ajax加载json三级联动-省市县

登琼
 登琼
发布于 2016/04/14 17:44
字数 370
阅读 282
收藏 7

    基于jquery实现

js

        var selectCon = [
	{"id" : "#countryID","name" : "国家"}, 
	{"id" : "#provinceID","name" : "省份"}, 
	{"id" : "#cityID","name" : "城市"}, 
	{"id" : "#countyID","name" : "地区"} 
	];
	/**	移除全部选择项内容,并添加默认提示信息,参数selectCon的下标*/
	function removeOption() {
		var id = "";
		var option = "";
		for ( var i = 0; i < arguments.length; i++) {
			id = selectCon[arguments[i]].id;
			option = id + " option";
			$(option).remove();
			$(id).append(
					"<option value=''>请选择" + selectCon[arguments[i]].name
							+ "</option>");
		}
	};
	/**	追加选择项内容,参数:要添加的jqueryId,行政区域父id*/
	function addOption(jqueryId, parentId) {
		if (!parentId) {
			return;
		}
		var url = "${pageContext.request.contextPath}/district/getDistricte.do";
		$.post(url, {
			"parentId" : parentId
		}, function(jsonString) {
			var size = jsonString.length;
			var option = "";
			for ( var i = 0; i < size; i++) {
				option += "<option value='"+jsonString[i].id+"'>"
						+ jsonString[i].name + "</option>";
			}
			$(jqueryId).append(option);
			//console.log(option);
		});
	};

	//国家-省
	$("#countryID").change(function() {
		var parentId = $("#countryID option:selected").val();
		removeOption(1, 2, 3);
		addOption("#provinceID", parentId);
	});
	//省份-城市
	$("#provinceID").change(function() {
		var parentId = $("#provinceID option:selected").val();
		removeOption(2, 3);
		addOption("#cityID", parentId);
	});
	//城市-区域
	$("#cityID").change(function() {
		var parentId = $("#cityID option:selected").val();
		removeOption(3);
		addOption("#countyID", parentId);
	});

html产品可见地区:
<select id="countryID">
<option value="">请选择国家</option>
<option value="1">中国</option>
</select>
<select id="provinceID"><option value="">请选择省份</option></select>
<select id="cityID"><option value="">请选择城市</option></select>
<select id="countyID"><option value="">请选择地区</option></select>

    返回的格式示例:

[
    {
        "id": 3,
        "parentId": 2,
        "code": "110100",
        "name": "北京市辖区"
    },
    {
        "id": 18,
        "parentId": 2,
        "code": "110200",
        "name": "\n县"
    }
]

CREATE TABLE `tb_district` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) DEFAULT NULL, COMMENT '父id'
  `code` varchar(6) NOT NULL DEFAULT '' COMMENT '行政编码',
  `name` varchar(255) NOT NULL DEFAULT '' COMMENT '行政名称',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uni_district_code` (`code`),
  KEY `parent_id` (`parent_id`),
) ENGINE=InnoDB AUTO_INCREMENT=3515 DEFAULT CHARSET=utf8 COMMENT='行政编码表';


© 著作权归作者所有

登琼
粉丝 3
博文 47
码字总数 8538
作品 0
广州
程序员
私信 提问
优化省市县三级联动(查询数据库)

javaWeb项目,页面实现省市县三级联动。 想到三种方法: 1.查询出所有省并显示,选择省或市,利用ajax从后台查询出对应数据,再显示。 2.查询出所有省市县,数据隐藏到页面,jquery实现联动显...

田野_7
2016/05/30
1K
6
js城市三级联动效果

重点就是全国城市的json数据,逻辑就是简单的循环查找和返回对应索引。 加入变换事件的回调处理接口。 效果截图和下载地址:js城市三级联动效果下载地址 部分代码,运行前需要加入json格式城...

透笔度
2016/05/27
292
0
reactjs省市县三级联动

如何使用ReactJs+Relay+GraphQL,实现省市县三级联动的组件? 1、使用json模拟服务器端的数据 [ { "id": "1001", "name": "北京市", "children": [ { "id": "1001001", "name": "北京市", "c......

liyuanyuan
2016/10/14
1K
0
php中如何把一个二维数组写成xml或者json格式的,前提是不知道数组元素的个数

php开发中,想自己写一个mysql+ajax的省市县三级联动,一切都写好了,就等着返回xml或者json格式的数据了。 查询是:$sql="select * from cities where sid=1";//1为江苏省的id.这个不用多说...

梦碎年代
2012/08/14
5.6K
11
rattan/address_popup

@TOC 前言 最近在学习开发H5产品,想用【mint-ui】的Picker和Popup组件去创建一个地址选择器。发现mint-ui官网只有一个简单的示例,要满足省/市/区三级联动的需求还需要做很多事情,也找了很...

rattan
04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

服务器性能监控之New Relic 入门教程

New Relic 是一个很强大的服务器性能监控工具,New Relic目前专注于SaaS和App性能管理业务,它支持支持agent和API传送数据,能够对部署在本地或在云中的web应用程序进行监控、故障修复、诊断...

xiaolyuh
30分钟前
4
0
SpringBoot 集成ElasticSearch

一、ElasticSearch介绍 ElasticSearch 是一个开源的搜索引擎,建立在一个全文搜索引擎库 Apache Lucene™ 基础之上。 Lucene 可以说是当下最先进、高性能、全功能的搜索引擎库——无论是开源...

zw965
55分钟前
6
0
【JVM学习】2.Java虚拟机运行时数据区

来源: 公众号: 猿人谷 这里我们先说句题外话,相信大家在面试中经常被问到介绍Java内存模型,我在面试别人时也会经常问这个问题。但是,往往都会令我比较尴尬,我还话音未落,面试者就会“...

物种起源-达尔文
今天
4
0
dart datetime

var date = DateTime.now().toUtc(); //格式化输出 String timestamp = "${date.year.toString()}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, ......

zdglf
今天
21
0
如何在Linux中复制文档

在办公室里复印文档过去需要专门的员工与机器。如今,复制是电脑用户无需多加思考的任务。在电脑里复制数据是如此微不足道的事,以致于你还没有意识到复制就发生了,例如当拖动文档到外部硬盘...

老孟的Linux私房菜
今天
50
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部