js地区选择器(支持select/option标签和ul/li标签选择)、三级联动、省市区选择的一个简单的jQuery插件

选择地区(中国省、城、区)的一个简单的jQuery插件以下给出6个例子,前面4个是以select/option标签以主，后面两个是以ul/li标签为主

包含文件

jQuery通用库，这里用的jquery-1.7.2.min.js

全国地区库distpicker.data.js

逻辑代码main.js

js地区选择器(支持select/option标签和ul/li标签选择)、三级联动、省市区选择的一个简单的jQuery插件_图一

js地区选择器(支持select/option标签和ul/li标签选择)、三级联动、省市区选择的一个简单的jQuery插件_图二

js地区选择器(支持select/option标签和ul/li标签选择)、三级联动、省市区选择的一个简单的jQuery插件_图三

例子一、自定义占位符

<div data-toggle="distpicker" data-style="option"  data-placeholder-province="---请选择省---" data-placeholder-city="---请选择市---" data-placeholder-district="---请选择区---">
                      <select class="distpicker_province"></select>
                      <select class="distpicker_city"></select>
                      <select class="distpicker_district"></select>
                    </div>

例子二、没有占位符

<div data-toggle="distpicker" data-style="option">
                      <select class="distpicker_province"></select>
                      <select class="distpicker_city"></select>
                      <select class="distpicker_district"></select>
                    </div>

例子三、自定义区(自定义初始化被选中的项)

 <div data-toggle="distpicker" data-style="option">
                      <select class="distpicker_province" data-province="320000"></select>
                      <select class="distpicker_city" data-city="320300"></select>
                      <select class="distpicker_district" data-district="320323"></select>
                    </div>

例子四、自定义回调函数(选择完省或者市或者区之后调用的函数)

<div data-toggle="distpicker" data-style="option" data-placeholder-province="请选择省" data-placeholder-city="请选择市" data-placeholder-district="请选择区">
                      <select class="distpicker_province" data-choose-back-fun="choose_province_fun_back"></select>
                      <select class="distpicker_city" data-choose-back-fun="choose_city_fun_back"></select>
                      <select class="distpicker_district" data-choose-back-fun="choose_district_fun_back"></select>
                    </div>

例子五、ul/li模式

<div data-toggle="distpicker" data-style="li" >
                       <ul class="distpicker_province" data-choose-back-fun="choose_province_fun_back_ul"></ul>
                       <ul class="distpicker_city"  data-choose-back-fun="choose_city_fun_back_ul"></ul>
                       <ul class="distpicker_district"  data-choose-back-fun="choose_district_fun_back_ul"></ul>
                    </div>

例子六、ul/li模式自定义区(自定义初始化被选中的项)

<div data-toggle="distpicker" data-style="li" >
                       <ul class="distpicker_province" data-province="110000" data-choose-back-fun="choose_province_fun_back_ul2"></ul>
                       <ul class="distpicker_city"  data-city="110100" data-choose-back-fun="choose_city_fun_back_ul2"></ul>
                       <ul class="distpicker_district" data-district="110101" data-choose-back-fun="choose_district_fun_back_ul2"></ul>
                    </div>