Basic

HTML:
<div data-toggle="distpicker">
<select></select>
<select></select>
<select></select>
</div>
Demo:

Custom placeholders

HTML:
<div data-toggle="distpicker">
<select data-province="---- 选择省 ----"></select>
<select data-city="---- 选择市 ----"></select>
<select data-district="---- 选择区 ----"></select>
</div>
Demo:

Custom districts

HTML:
<div data-toggle="distpicker">
<select data-province="浙江省"></select>
<select data-city="杭州市"></select>
<select data-district="西湖区"></select>
</div>
Demo:

The districts must be existed in the distpicker.data.js file!

Initialize with $.fn.distpicker method

Basic

HTML:
<div id="distpicker1">
<select></select>
<select></select>
<select></select>
</div>
JavaScript:
$("#distpicker1").distpicker();
Demo:

Custom placeholders

HTML:
<div id="distpicker2">
<select></select>
<select></select>
<select></select>
</div>
JavaScript:
$("#distpicker2").distpicker({
province: "---- 所在省 ----",
city: "---- 所在市 ----",
district: "---- 所在区 ----"
});
Demo:

Custom districts

HTML:
<div id="distpicker3">
<select></select>
<select></select>
<select></select>
</div>
JavaScript:
$("#distpicker3").distpicker({
province: "浙江省",
city: "杭州市",
district: "西湖区"
});
Demo:

The districts must be existed in the distpicker.data.js file!

Methods

More examples

Only province and city

HTML:
<div data-toggle="distpicker">
<select></select>
<select></select>
</div>
Demo:

Only province

HTML:
<div data-toggle="distpicker">
<select></select>
</div>
Demo:

Without placeholders

JavaScript:
$("#distpicker4").distpicker({
placeholder: false
});
Demo:

Without automatic selection

JavaScript:
$("#distpicker5").distpicker({
autoSelect: false
});
Demo:

适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

来源：html5实例,css3实例,jquery实例