distpicker|一款可以实现中国省市区地址三级联动的jQuery插件 A simple jQuery plugin for picking provinces, cities and districts of China

Getting started

---

Installation

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/distpicker.js"></script>

Create HTML elements:

<div><!-- container -->
  <select></select><!-- province -->
  <select></select><!-- city -->
  <select></select><!-- district -->
</div>

Initialize by data-toggle="distpicker" attribute

Basic

HTML:

<div data-toggle="distpicker">
  <select></select>
  <select></select>
  <select></select>
</div>

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 —— —— 区 ——

Custom placeholders

HTML:

<div data-toggle="distpicker">
  <select data-province="---- 选择省 ----"></select>
  <select data-city="---- 选择市 ----"></select>
  <select data-district="---- 选择区 ----"></select>
</div>

Demo:

---- 选择省 ----北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 ---- 选择市 ---- ---- 选择区 ----

Custom districts

HTML:

<div data-toggle="distpicker">
  <select data-province="浙江省"></select>
  <select data-city="杭州市"></select>
  <select data-district="西湖区"></select>
</div>

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 ——杭州市宁波市温州市嘉兴市湖州市绍兴市金华市衢州市舟山市台州市丽水市 —— 区 ——上城区拱墅区西湖区滨江区萧山区余杭区富阳区临安区临平区钱塘区桐庐县淳安县建德市

Initialize by $.fn.distpicker method

Basic

HTML:

<div id="distpicker1">
  <select></select>
  <select></select>
  <select></select>
</div>

JavaScript:

$("#distpicker1").distpicker();

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 —— —— 区 ——

Custom placeholders

HTML:

<div id="distpicker2">
  <select></select>
  <select></select>
  <select></select>
</div>

JavaScript:

$("#distpicker2").distpicker({
  province: '---- 所在省 ----',
  city: '---- 所在市 ----',
  district: '---- 所在区 ----'
});

Demo:

---- 所在省 ----北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 ---- 所在市 ---- ---- 所在区 ----

Custom districts

HTML:

<div id="distpicker3">
  <select></select>
  <select></select>
  <select></select>
</div>

JavaScript:

$("#distpicker3").distpicker({
  province: '浙江省',
  city: '杭州市',
  district: '西湖区'
});

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 ——杭州市宁波市温州市嘉兴市湖州市绍兴市金华市衢州市舟山市台州市丽水市 —— 区 ——上城区拱墅区西湖区滨江区萧山区余杭区富阳区临安区临平区钱塘区桐庐县淳安县建德市

Options

---

Supports to set the options by data-* attributes:

HTML:

<div data-toggle="distpicker" data-autoselect="3" data-province="浙江省">
  <select></select>
  <select></select>
  <select></select>
</div>

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 ——杭州市宁波市温州市嘉兴市湖州市绍兴市金华市衢州市舟山市台州市丽水市 —— 区 ——上城区拱墅区西湖区滨江区萧山区余杭区富阳区临安区临平区钱塘区桐庐县淳安县建德市

Methods

---

You can call methods by $().distpicker('method', arg1, arg2, ..., argN).

HTML:

<div id="distpicker">
  <select></select>
  <select></select>
  <select></select>
</div>

JavaScript:

$("#distpicker").distpicker({
  province: '福建省',
  city: '厦门市',
  district: '思明区'
});

Demo:

Examples

---

Only province and city

HTML:

<div data-toggle="distpicker">
  <select></select>
  <select></select>
</div>

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 ——

Only province

HTML:

<div data-toggle="distpicker">
  <select></select>
</div>

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区

Select province automatically

HTML:

<div data-toggle="distpicker" data-autoselect="1">
  <select></select>
  <select></select>
  <select></select>
</div>

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 ——北京城区 —— 区 ——

Select province and city automatically

HTML:

<div data-toggle="distpicker" data-autoselect="2">
  <select></select>
  <select></select>
  <select></select>
</div>

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 ——北京城区 —— 区 ——东城区西城区朝阳区丰台区石景山区海淀区门头沟区房山区通州区顺义区昌平区大兴区怀柔区平谷区密云区延庆区

Select all districts automatically

HTML:

<div data-toggle="distpicker" data-autoselect="3">
  <select></select>
  <select></select>
  <select></select>
</div>

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 ——北京城区 —— 区 ——东城区西城区朝阳区丰台区石景山区海淀区门头沟区房山区通州区顺义区昌平区大兴区怀柔区平谷区密云区延庆区

Without placeholders

HTML:

<div data-toggle="distpicker" data-placeholder="false">
  <select></select>
  <select></select>
  <select></select>
</div>

Demo:

北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 北京城区 东城区西城区朝阳区丰台区石景山区海淀区门头沟区房山区通州区顺义区昌平区大兴区怀柔区平谷区密云区延庆区

Administrative code as value

HTML:

<div data-toggle="distpicker" data-value-type="code">
  <select data-province="330000"></select>
  <select data-city="330100"></select>
  <select data-district="330106"></select>
</div>

Demo:

—— 省 ——北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区 —— 市 ——杭州市宁波市温州市嘉兴市湖州市绍兴市金华市衢州市舟山市台州市丽水市 —— 区 ——上城区拱墅区西湖区滨江区萧山区余杭区富阳区临安区临平区钱塘区桐庐县淳安县建德市