Distpicker v2.0.8

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: