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