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: "溧阳"
});

Demo:

reset 苏州-姑苏

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

Methods