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: "番禺区",
  district: "石楼镇"
});
Demo:

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