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>

Initialize with data-toggle="city-picker" attribute

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!

Initialize with $.fn.citypicker method

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!

Methods