天天看点

distpicker省市县三级联动简单使用方法

插件下载地址:http://www.jq22.com/jquery-info8054

引入JS包:

<script src="${pageContext.request.contextPath}/js/distpicker.data.js" charset="UTF-8"></script>

<script src="${pageContext.request.contextPath}/js/distpicker.js" charset="UTF-8"></script>

<script src="${pageContext.request.contextPath}/js/main.js" charset="UTF-8"></script>

<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>

页面:

<div data-toggle="distpicker" id="target">

                                <table width="100%" height="40" cellpadding="0" cellspacing="0">

                                    <tr>

                                        <td width="25%" class="put5" >

                                        <select class="form-control" id="province1" data-province="河北省" style="height: 30px;"></select> 

                                        <label class="sr-only" for="province1">省</label>

                                        </td>

                                        <td width="25%" class="put5">

                                        <select class="form-control" id="city1" name="cityName" data-city="${stu.cityName}" style="height: 30px;"></select> 

                                        <label class="sr-only" for="city1">市</label>

                                        </td>

                                        <td width="75%" class="put5">

                                        <select class="form-control" id="district1" name="regionName" data-district="${stu.regionName}"  style="height: 30px;"></select> 

                                        <label class="sr-only" for="district1">区(县)</label>

                                        </td>

                                    </tr>

                                </table>

                                </div>

需要注意的是:

data-toggle="distpicker"  一定要有

data-province="河北省"   设置默认值

name自己定义

继续阅读