选择地区(中国省、城、区)的一个简单的jQuery插件

以下给出6个例子,前面4个是以select/option标签以主，后面两个是以ul/li标签为主

包含文件

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

全国地区库distpicker.data.js

逻辑代码main.js

例子一、自定义占位符

注：属性data-toggle="distpicker"class="distpicker_province" class="distpicker_city" class="distpicker_district"是必须

data-style="option"表示子集列表是以option标签包起来；当前后面还有ul/li的例子那时就是data-style="li",具体最后会有例子

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

例子二、没有占位符

注：属性data-toggle="distpicker"class="distpicker_province" class="distpicker_city" class="distpicker_district"是必须

data-style="option"表示子集列表是以option标签包起来；当前后面还有ul/li的例子那时就是data-style="li",具体最后会有例子

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

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

注：属性data-toggle="distpicker"class="distpicker_province" class="distpicker_city" class="distpicker_district"是必须

data-style="option"表示子集列表是以option标签包起来；当前后面还有ul/li的例子那时就是data-style="li",具体最后会有例子

<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>

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

为什么要加这个属性中，根据童鞋反应选择完区很多时候需要干点事，比如说：我们选择完区之后就可以在那个自定义的函数里根据区的id调用这个区里面的所有学校。

注：属性data-toggle="distpicker"class="distpicker_province" class="distpicker_city" class="distpicker_district"是必须

data-style="option"表示子集列表是以option标签包起来；当前后面还有ul/li的例子那时就是data-style="li",具体最后会有例子

根据实际情况而定需要就加data-choose-back-fun这个属性，不需要就不加。

<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模式

当然这里不仅可以自定义ul/li模式，可以定义div、p标签等模式根据自己需要来

注：属性data-toggle="distpicker"class="distpicker_province" class="distpicker_city" class="distpicker_district"是必须

data-style="li"表示子集列表是以li标签包起来

当然这里也可以自定义回调函数，只不过这里是用的click事件，点完所选中的项之后调用。根据实际情况而定需要就加data-choose-back-fun这个属性，不需要就不加。

<div data-toggle="distpicker" data-style="option">
    <ul class="distpicker_province" data-choose-back-fun="choose_province_fun_back"></ul>
    <ul class="distpicker_city" data-choose-back-fun="choose_city_fun_back"></ul>
    <ul class="distpicker_district" data-choose-back-fun="choose_district_fun_back"></ul>
 </div>

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

        注：属性data-toggle="distpicker"class="distpicker_province" class="distpicker_city" class="distpicker_district"是必须

        data-style="li"表示子集列表是以li标签包起来

        当然这里也可以自定义回调函数，只不过这里是用的click事件，点完所选中的项之后调用。根据实际情况而定需要就加data-choose-back-fun这个属性，不需要就不加。

        <div data-toggle="distpicker" data-style="option">
    <ul class="distpicker_province" data-province="110000" data-choose-back-fun="choose_province_fun_back2"></ul>
    <ul class="distpicker_city"  data-city="110100" data-choose-back-fun="choose_city_fun_back2"></ul>
    <ul class="distpicker_district" data-district="110101" data-choose-back-fun="choose_district_fun_back2"></ul>
 </div>