城市三级联动

最新推荐文章于 2023-07-11 09:21:45 发布
最新推荐文章于 2023-07-11 09:21:45 发布
阅读量626 收藏
点赞数

您现在的位置：

  

根据IP地址定位：IP接口文档

  

通过地区编码初始化设置

$('#demo').citys({code:350206});

  

通过地区名称初始化设置，并且下拉框值为地区名称

$('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'});

 

请选择地区

事件处理

$('#demo2').citys({
    required:false,
    nodata:'disabled',
    onChange:function(data){
        var text = data['direct']?'(直辖市)':'';
        $('#place').text('当前选中地区：'+data['province']+text+' '+data['city']+' '+data['area']);
    }
});

   

扩展显示行政区划第四级(街道)信息：

    var $town = $('#demo3 select[name="town"]');
    var townFormat = function(info){
    $town.hide().empty();
    if(info['code']%1e4&&info['code']<7e6){	//是否为“区”且不是港澳台地区
    	$.ajax({
    		url:'http://passer-by.com/data_location/town/'+info['code']+'.json',
    		dataType:'json',
    		success:function(town){
    			$town.show();
    			for(i in town){
    					$town.append('<option value="'+i+'">'+town[i]+'</option>');
    			}
    		}
    	});
    }
    };
    $('#demo3').citys({
        province:'福建',
        city:'厦门',
        area:'思明',
        onChange:function(info){
        	townFormat(info);
        }
    },function(api){
        var info = api.getInfo();
        townFormat(info);
    });

调用方法：

$(selector).citys(options,callback);

options参数

参数 默认值 说明
dataUrl [数据库地址]

最新数据库（2017年5月）：JSON格式JSONP格式

数据库项目：中国行政区划（省、市、区、街道）

dataType 'json'

数据库类型:'json'或'jsonp'

IE9-由于默认安全设置，需开启“通过域访问数据源”才能跨域访问json，此类情况建议使用jsonp格式

provinceField 'province' 省份(省级)字段名
cityField 'city' 城市(地级)字段名
areaField 'area' 地区(县区级)字段名
valueType 'code' 下拉框值的类型,code行政区划代码,name地名
code 0 地区编码
province [无] 省份(省级),可以为地区编码或者名称
city [无] 城市(地级),可以为地区编码或者名称
area [无] 地区(县区级),可以为地区编码或者名称
required true 是否必须选中(是否自动选择地区)
nodata 'hidden' 当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理
onChange [无] 地区切换时触发,回调函数传入地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码

callback(api)参数

方法 说明
getInfo(data) 获取当前选中的地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,area地区(县区级)名称,code地区编码
大头菜小白菜
关注
region-all三级联动世界城市js英文版
03-19
三级联动世界城市英文版
三级联动省市区信息实现(Mysql)
qq_25635139的博客
02-27 4804
摘要 动态的从数据库加载全国省市区，后台使用的是SpringMvc，前台使用的是bootstrap页面展示。demo源码下载地址：https://git.oschina.net/zhengweishan/GetProvinceCityArea​ demo源码下载地址：https://git.oschina.net/zhengweishan/GetProvinceCityArea 首先声明一下...
html选择地址的插件,jQuery中国省市区城市选择三级联动插件
weixin_39900023的博客
06-03 600
特效描述：省市区选择 三级联动插件。兼容IE6 jQuery中国省市区地址三级联动插件代码结构1. 引入CSS2. 引入JS3. HTML代码中国省市区地址三级联动jQuery插件 A simple jQuery plugin for picking provinces, cities and districts of ChinaBasicHTML:<div data-toggle="dis...
java实现省市区三级联动
百创科技
07-11 3009
我的想法很简单 ，可能想的有点少，首先遍历省份，当数据发生改变调用方法请求根据省的id去查询市区的信息，当市区信息发生改变调用另一个方法去查询县区的信息。，（个人觉得两个接口层公用一个也行，就像那种公用一个的改为mapper接口层那种的也很方便，可能这样比较不规范吧）6、最后映射页面：jsp。
省市区三级联动
gua_Piter的博客
01-17 713
通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级当点击第一级下拉菜单，第二级菜单的内容会自动匹配:选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。
世界城市三级联动（中英文）插件
10-09
《世界城市三级联动（中英文）插件》是一款专门用于网页中实现城市选择功能的JavaScript插件。这个插件的特点在于其提供了三级联动的效果，即国家-省份-城市的选择，同时支持中文和英文两种语言，使得全球用户都能...
jQuery城市三级联动菜单特效
07-24
本项目“jQuery城市三级联动菜单特效”利用jQuery的功能，构建了一个实用的省市区三级联动选择器，用户在选择时能流畅地从省级选项过渡到市级，再细化到区级，提供了一种高效且友好的用户体验。 首先，我们要理解...
city+province+country.sql
12-21
全球国家->省份/州->城市 数据表 国家表部分数据如下: SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for country -- ---------------------------- DROP TABLE IF EXISTS `country`; CREATE TABLE `country` ( `id` int(11) NOT NULL AUTO_INCREMENT, `country_code` varchar(100) NOT NULL DEFAULT '' COMMENT '国家代码', `country_name` varchar(100) NOT NULL DEFAULT '' COMMENT '英文国家名称', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=260 DEFAULT CHARSET=utf8mb4 COMMENT='国家表'; -- ---------------------------- -- Records of country -- ---------------------------- INSERT INTO `country` VALUES ('1', 'AX', 'Aland Island'); INSERT INTO `country` VALUES ('2', 'AL', 'Albania'); INSERT INTO `country` VALUES ('3', 'DZ', 'Algeria'); INSERT INTO `country` VALUES ('4', 'AS', 'American Samoa'); INSERT INTO `country` VALUES ('5', 'AD', 'Andorra'); INSERT INTO `country` VALUES ('6', 'AO', 'Angola'); INSERT INTO `country` VALUES ('7', 'AI', 'Anguilla'); INSERT INTO `country` VALUES ('8', 'AG', 'Antigua And Barbuda'); INSERT INTO `country` VALUES ('9', 'AR', 'Argentina'); INSERT INTO `country` VALUES ('10', 'AM', 'Armenia'); INSERT INTO `country` VALUES ('11', 'AW', 'Aruba'); INSERT INTO `country` VALUES ('12', 'XD', 'Ascension'); 省份表部分数据如下 SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for province -- ---------------------------- DROP TABLE IF EXISTS `province`; CREATE TABLE `province` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '关联city表的province_id', `country_id` int(11) NOT NULL DEFAULT 0 COMMENT '国家id', `province_name` varchar(100) NOT NULL DEFAULT '' COMMENT '省份名称', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=3836 DEFAULT CHARSET=utf8mb4 COMMENT='省份表'; -- ---------------------------- -- Records of province -- ---------------------------- INSERT INTO `province` VALUES ('1', '2', 'Berat'); INSERT INTO `province` VALUES ('2', '2', 'Bulqize'); INSERT INTO `province` VALUES ('3', '2', 'Diber'); INSERT INTO `province` VALUES ('4', '2', 'Delvine'); INSERT INTO `province` VALUES ('5', '2', 'Durres'); INSERT INTO `province` VALUES ('6', '2', 'Devoll'); INSERT INTO `province` VALUES ('7', '2', 'Elbasan'); INSERT INTO `province` VALUES ('8', '2', 'Kolonje'); INSERT INTO `province` VALUES ('9', '2', 'Fier'); INSERT INTO `province` VALUES ('10', '2', 'Gjirokaster'); INSERT INTO `province` VALUES ('11', '2', 'Gramsh'); INSERT INTO `province` VALUES ('12', '2', 'Has'); INSERT INTO `province` VALUES ('13', '2', 'Kavaje'); INSERT INTO `province` VALUES ('14', '2', 'Kurbin'); INSERT INTO `province` VALUES ('15', '2', 'Kucove'); INSERT INTO `province` VALUES ('16', '2', 'Korce'); 城市表部分数据如下: DROP TABLE IF EXISTS `city`; CREATE TABLE `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `province_id` int(11) NOT NULL DEFAULT 0 COMMENT 'province表id', `city_name` varchar(100) NOT NULL DEFAULT '' COMMENT '城市名称', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=381115 DEFAULT CHARSET=utf8mb4 COMMENT='城市表'; -- ---------------------------- -- Records of city -- ---------------------------- INSERT INTO `city` VALUES ('1', '120', 'ROSARIO.DE LA FRONTERA'); INSERT INTO `city` VALUES ('2', '120', 'SALTA'); INSERT INTO `city` VALUES ('3', '120', 'TRES CERRITOS'); INSERT INTO `city` VALUES ('4', '120', 'ROSARIO.DE LA LERMA'); INSERT INTO `city` VALUES ('5', '120', 'CERRILLOS'); INSERT INTO `city` VALUES ('6', '120', 'C. QUIJANO'); INSERT INTO `city` VALUES ('7', '120', 'CAMPO SANTO'); INSERT INTO `city` VALUES ('8', '120', 'GENERAL.GUEMES'); INSERT INTO `city` VALUES ('9', '120', 'METAN'); INSERT INTO `city` VALUES ('10', '120', 'CARRERA'); INSERT INTO `city` VALUES ('11', '120', 'EL GALPON'); INSERT INTO `city` VALUES ('12', '120', 'AGUAS BLANCAS'); INSERT INTO `city` VALUES ('13', '120', 'ORAN'); INSERT INTO `city` VALUES ('14', '120', 'TABACAL'); INSERT INTO `city` VALUES ('15', '120', 'COLONIA SANTA ROSA'); INSERT INTO `city` VALUES ('16', '120', 'PICHANAL'); 关于中国的部分城市数据: INSERT INTO `city` VALUES ('41614', '640', 'Qinzhou'); INSERT INTO `city` VALUES ('41615', '640', 'Yulin'); INSERT INTO `city` VALUES ('41616', '640', 'Baise'); INSERT INTO `city` VALUES ('41617', '640', 'Hezhou'); INSERT INTO `city` VALUES ('41618', '640', 'Hechi'); INSERT INTO `city` VALUES ('41619', '640', 'Chongzuo'); INSERT INTO `city` VALUES ('41620', '640', 'Laibin'); INSERT INTO `city` VALUES ('41621', '641', 'Shaoguan'); INSERT INTO `city` VALUES ('41622', '641', 'Guangzhou'); INSERT INTO `city` VALUES ('41623', '641', 'Zhuhai'); INSERT INTO `city` VALUES ('41624', '641', 'Shenzhen'); INSERT INTO `city` VALUES ('41625', '641', 'Foshan'); INSERT INTO `city` VALUES ('41626', '641', 'Shantou'); INSERT INTO `city` VALUES ('41627', '641', 'Zhanjiang'); INSERT INTO `city` VALUES ('41628', '641', 'Jiangmen'); INSERT INTO `city` VALUES ('41629', '641', 'Zhaoqing'); INSERT INTO `city` VALUES ('41630', '641', 'Maoming'); INSERT INTO `city` VALUES ('41631', '641', 'Meizhou'); 关于中国部分省份数据如下: INSERT INTO `province` VALUES ('653', '
php 三级城市联动
07-11
自己写的jquery+ajax代码，比较奇葩，附有地区数据表。测试没问题
php 城市三级联动
12-17
PHP+Mysql省市区三级联动网上升级版 说明 1,导入168sun.sql文件到数据库，注意编码为utf-8 2,修改index.php和data.php文件中的数据库连
js全国城市三级联动
07-25
js全国城市三级联动
省市级联动，附使用示例和数据表数据
04-02
省市区级联动，附使用示例和数据表数据 很实用
三级省市联动
QAQwin的博客
08-03 820
简单的三级城市联动（或称省级联动）一看就懂的简单js编程
省市区三级联动完整数据
03-13
从国土资源局官网获取的国家省市区数据，已经导入mysql数据库生成了SQL文件
PHP城市级联系统 下拉选择
11-21
PHP城市级联系统
layui城市三级联动
最新发布
11-19
layui城市三级联动是一种基于Layui框架的前端城市选择组件。该组件可以实现省市区三级联动的功能，用户可以通过这个组件方便地选择所在的省、市和区。在页面上显示出省、市、区三级的选择框，用户可以通过点击下拉框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值