yangyifeng / distpicker

A jQuery plugin for pick provinces, citys and districts of Chinese. （中国 · 省市区三级联动）

District Picker

A jQuery plugin for pick provinces, citys and districts of China.

• Documentation

Getting started

Quick start

Four quick start options are available:

• Download the latest release.
• Clone the repository: git clone https://github.com/fengyuanchen/distpicker.git.
• Install with NPM: npm install distpicker.
• Install with Bower: bower install distpicker.

Installation

Include files:

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

Create HTML elements:

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

Usage

Initialize with distpicker attribute

Basic

<div distpicker>
    <select></select>
    <select></select>
    <select></select>
</div>

Custom texts

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

Custom districts

<div distpicker>
    <select data-province="北京"></select>
    <select data-city="北京市"></select>
    <select data-district="朝阳区"></select>
</div>

Initialize with $.fn.distpicker method

Basic

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

Custom texts:

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

Custom districts:

$("#target").distpicker({
    province: "北京",
    city: "北京市",
    district: "朝阳区"
});

Browser Support

• IE 6+
• Chrome 33+
• Firefox 27+
• Safari 5.1+
• Opera 19+

As a jQuery plugin, you can reference to the jQuery Browser Support.

License

Released under the MIT license.