A simple jQuery plugin for picking provinces, cities and districts of China.
<script src="/path/to/jquery.js"></script><!-- jQuery is required --> <script src="/path/to/distpicker.js"></script>
<div><!-- container --> <select></select><!-- province --> <select></select><!-- city --> <select></select><!-- district --> </div>
data-toggle="distpicker"
attribute<div data-toggle="distpicker"> <select></select> <select></select> <select></select> </div>
<div data-toggle="distpicker"> <select data-province="---- 选择省 ----"></select> <select data-city="---- 选择市 ----"></select> <select data-district="---- 选择区 ----"></select> </div>
<div data-toggle="distpicker"> <select data-province="浙江省"></select> <select data-city="杭州市"></select> <select data-district="西湖区"></select> </div>
$.fn.distpicker
method<div id="distpicker1"> <select></select> <select></select> <select></select> </div>
$("#distpicker1").distpicker();
<div id="distpicker2"> <select></select> <select></select> <select></select> </div>
$("#distpicker2").distpicker({ province: "---- 所在省 ----", city: "---- 所在市 ----", district: "---- 所在区 ----" });
<div id="distpicker3"> <select></select> <select></select> <select></select> </div>
$("#distpicker3").distpicker({ province: "浙江省", city: "杭州市", district: "西湖区" });
<div data-toggle="distpicker"> <select></select> <select></select> </div>
<div data-toggle="distpicker"> <select></select> </div>
$("#distpicker4").distpicker({ placeholder: false });
$("#distpicker5").distpicker({ autoSelect: false });