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" border="0" 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自己定义

猜你喜欢

转载自blog.csdn.net/cxws110/article/details/92806496