Distpicker v2.0.0-alpha.1

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>

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:

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:


HTML:
<div data-toggle="distpicker">
  <select></select>
  <select></select>
</div>
Demo:

HTML:
<div data-toggle="distpicker">
  <select></select>
</div>
Demo:

JavaScript:
$("#distpicker4").distpicker({
  placeholder: false
});
Demo:

JavaScript:
$("#distpicker5").distpicker({
  autoSelect: false
});
Demo: