$.fn.regionPicker() 地区选择插件 For PC端/手机移动端

各用法demo

className	html	desc	options desc
showType: 'popup'
.js-demo-mobile-1		4级(1-4) 手机端	levelRange: [1,4], // 国家/省份/城市/县区 isMobileBrowser:true
.js-demo-mobile-1-1		3级(2-4) 手机端回显	countryId: 1, // 中国 levelRange: [2,4], // 省份/城市/县区 isMobileBrowser:true selectedRegionIds: ['20', '235', '2313'] // 已经选择的地区 regionId 数组, 如：中国/广东省/广州/越秀区
.js-demo-10		2级(1-2) 回显	levelRange: [1,2], // 国家/省份
.js-demo-10-1		2级(2-3) 省级及以下必须传 countryId	levelRange: [2,3], // 省份/城市
.js-demo-11		3级(2-3-4) 省级及以下必须传 countryId	staticData: [...], // 传入静态数据 levelRange: [2,4], // 省份/城市/县区
.js-demo-11-1		3级(2-3-4) 回显	levelRange: [2,4], // 省份/城市/县区 selectedRegionIds: ['20', '235', '2313'] // 已经选择的地区 regionId 数组, 如：广东省/广州/越秀区
.js-demo-12		4级(1-2-3-4)	levelRange: [1,4], // 国家/省份/城市/县区
.js-demo-12-1		4级(1-2-3-4) 回显	levelRange: [1,4], // 国家/省份/城市/县区 selectedRegionIds: ['1', '20', '235', '2313'] // 已经选择的地区 regionId 数组, 如：中国/广东省/广州/越秀区
.js-demo-13		其它参数	defaultText: '选我选我选我', // 默认: '请选择' popupWidth: 500, // 默认: 300 popupExtraOffsetTop:-5, // 默认: 0 popupExtraOffsetLeft:10, // 默认: 0 styleClass:'popup-demo-13' // 默认: ''
.js-demo-14		多个元素用同一语句一起调用	国家/省份/城市回调 $element 的使用
showType: 'insert' (请注意：select默认没有任何样式)
.js-demo-20	js-demo-21-1	2级(1-2) 回显	levelRange: [1,2], // 国家/省份
.js-demo-20-1	js-demo-21-1	2级(2-3) 省级及以下必须传 countryId	levelRange: [2,3], // 省份/城市 styleClass:'insert-demo-20-1' // 默认: ''
.js-demo-21	js-demo-21	3级(2-3-4) 省级及以下必须传 countryId	staticData: [...], // 传入静态数据 levelRange: [2,4], // 省份/城市/县区
.js-demo-21-1	js-demo-21-1	3级(2-3-4) 回显	levelRange: [2,4], // 省份/城市/县区 selectedRegionIds: ['20', '235', '2313'] // 已经选择的地区 regionId 数组, 如：广东省/广州/越秀区
.js-demo-22	js-demo-22	4级(1-2-3-4)	levelRange: [1,4], // 国家/省份/城市/县区 defaultText: ['--国家--', '--省份--', '--城市--']
.js-demo-22-1	js-demo-22-1	4级(1-2-3-4) 回显	levelRange: [1,4], // 国家/省份/城市/县区 selectedRegionIds: ['1', '20', '235', '2313'] // 已经选择的地区 regionId 数组, 如：中国/广东省/广州/越秀区
.js-demo-23	js-demo-23	select 一个一个出来	isShowAllSelects: false // 是否显示所有 select，如为 false，则只显示最前的一个，选择后才显示后一个

参数说明

item	default	desc	影响的 showType
getRegionUrl	null	数据接口，eg: '/Ajax/GetRegionChildList'	all
countryId	null	国家id	all
dataKeys	{ data : 'data', id : 'id', // 地区id parentId : 'parentId', // 上级id name : 'name', // 地区名称 code : 'code' // 地区代码(拼音或英文) }	地区数据每行的元素数据集合的key(如后端返回的数据的key跟默认值不一样，必须传此项)。 (每行地区数据应该具备此4项内容)	all
staticData	[]	需要使用的静态数据数组(一般为某个国家下所有省市区平级数据，具体参见相关 demo)，使用静态数据时，countryId 参数必传。 (数据结构参考 dataKeys)	all
separator	'/'	{string} popup模式显示到input的选中地区的分隔符	pupop
showType	'popup'	可选值：popup/insert，即是弹层式还是在页面生成几个select的方式。	-
popupWidth	300	弹窗默认总宽度(px)。	pupop
popupExtraOffsetTop	0	弹窗额外的上偏移量(一般没用，以防不测)	pupop
popupExtraOffsetLeft	0	弹窗额外的左偏移量(一般没用，以防不测)	pupop
styleClass	''	额外类名。可用于样式控制等特别需要。类名会加在如下位置： showType: 'popup': 弹层最外层容器 showType: 'insert': 存放 select 的容器	all
levelRange	[1,4]	地区层级范围，默认4级全部显示出来：国家/省份/城市/县区。可用值如下： [1,4]: 国家/省份/城市/县区 [1,3]: 国家/省份/城市 [1,2]: 国家/省份 [2,4]: 省份/城市/县区 (必须传参数: countryId) [2,3]: 省份/城市 (必须传参数: countryId) [3,4] 这种用法不存在，传了也出不来你想要的东西。	all
selectedRegionIds	[]	已经选择的地区 regionId 数组，按地区层级从大到小，数组元素数量只能小于等于 levelRange 范围的层级数。如：[1, 20, 235, 2313] 或 ['1', '20', '235', '2313']，表示：中国/广东省/广州/越秀区。如果：levelRange:[1,3](表示有3级地区：国家/省份/城市)，但是 selectedRegionIds:['1', '20', '235', '2313']，传了4级数据，插件将会报错。这些值一般由后端提供	all
isShowAllSelects	true	是否显示所有 select，如为 false，则只显示最前的一个，选择后才显示后一个，如此类推。	insert
defaultText	'请选择'	可传 string/array(仅showType: 'insert'时)，如：'选我呀' 或 ['国家', '省份', '城市', '区域'] 出现位置： showType: 'popup': 调用插件的 input[placeholder] showType: 'insert': select 的第一个 option 的文字	all
onSelect	function (result, $element) { window.console && console.log(result); }	回调: popup 的地区被点击时或 select 下拉框被选择时，给 hidden 的 input 赋值之类的操作都请在回调里做 result: 如：{ regions: [...], hasChild: true/false } result.regions: [{"regionId":"20","regionName":"广东省"},{"regionId":"235","regionName":"广州"},...] result.hasChild: true/false // 当前选中的层级是否还有下级(popup模式下此值为false时，则点选地区后弹层会关闭) $element: 调用此插件的dom	all 手机端无此回调，因为在用户点击确定前，回调没有意义
onClose	function (result, $element) { window.console && console.log(result); }	回调: popup模式被关闭时回调参数同 onSelect	popup
onShow	function (result, $element) { }	回调: popup模式弹层显示时回调参数同 onSelect	popup
onComplete	function ($element) { }	回调: 插件渲染输出完成回调参数只有一个：$element	all
onAjaxStart	function ($element) { }	回调: 获取异步数据发起请求前，即 ajax.beforeSend，主要用于取数据等待时禁用一些按钮等。回调参数只有一个：$element	all
onAjaxComplete	function ($element) { }	回调: 获取异步数据完成后，即 ajax.complete，主要用于取数据完成后启用一些按钮等。回调参数只有一个：$element	all
isMobileBrowser	false	否为手机端模式	仅 showType: 'popup' 时起作用
mobileHidePageId	null	要隐藏的主页面id	仅 isMobileBrowser: true 时起作用
mobilePageTitle	'选择所在地'	虚拟页面标题	仅 isMobileBrowser: true 时起作用

方法

$('#xxx').regionPicker('reset'); // 重置 (把input的值设为空，把弹出的值也设为空，把所有select设为未选择，相当于用空值初始化插件)
$('#xxx').regionPicker('destroy'); // 销毁 (解除插件调用)

接口数据结构

国家一级数据为一次性返回 (获得过一次会保存在内存里)
某个国家下的省份、城市、县区数据为一次性全部返回 (获得过一次会保存在内存里)

说明

打开浏览器控制台，边操作、边看调试输出、边看源代码。查看回调： onSelect(result)，给 hidden 的 input 赋值之类的操作都请在回调里做。

在本页面源码中搜索各 demo 的类名(className) 即可看到具体调用方法。

引用

需要引用以下文件：

样式：

脚本：