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.jsfile!

Initialize with $.fn.distpickermethod

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.jsfile!

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: