Getting started

Installation

Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/city-picker.data.js"></script>
<script src="/path/to/city-picker.js"></script>
Create HTML elements:
<div style="position: relative;"><!-- container -->
  <input readonly type="text">
</div>

Basic

HTML:
<div data-toggle="city-picker">
   <input readonly type="text" data-toggle="city-picker" >
</div>
Demo:

Level

HTML:
<div style="position: relative;"><!-- container -->
  <input readonly type="text" data-toggle="city-picker" placeholder="请选择省/市" data-level="city" >
</div>
Demo:

Custom placeholders

HTML:
<div style="position: relative;"><!-- container -->
  <input readonly type="text" data-toggle="city-picker" placeholder="点击从下拉面板中选择省/市/区">
</div>
Demo:

Simple Address

HTML:
<div style="position: relative;"><!-- container -->
  <input readonly type="text" data-toggle="city-picker" data-simple="true" >
</div>
Demo:

Responsive Width

HTML:
<div style="position: relative;"><!-- container -->
  <input readonly type="text" data-toggle="city-picker" style="width:50%;">
</div>
Demo:

Custom Province / City / District

HTML:
<div style="position: relative;"><!-- container -->
  <input readonly type="text" data-toggle="city-picker" value="北京市/北京市/海淀区">
</div>
Demo:

The districts must be existed in the city-picker.data.js file!

Basic

HTML:
<div style="position: relative;"><!-- container -->
  <input id="city-picker1" readonly type="text">
</div>
JavaScript:
$("#city-picker1").citypicker();
Demo:

Custom Province / City / District

HTML:
<div style="position: relative;"><!-- container -->
  <input id="city-picker2" readonly type="text">
</div>
JavaScript:
$("#city-picker2").citypicker({
  province: "江苏",
  city: "常州",
  district: "溧阳"
});
Demo:

The districts must be existed in the city-picker.data.js file!