习课省市区的三级联动(cxselect的使用)
1,api:
http://www.jq22.com/jquery-info3238
2,demo:
http://blog.****.net/luo201227/article/details/38844175
3,自己写的:
jsp页面:
<!-- 引入js --> <script type='text/javascript' src='${ctx}/js/core/jquery-1.7.2.min.js'></script> <script src="${ctx }/js/com/jquery.cxselect.js"></script> <script type="text/javascript"> $(function () { //插件初始化地址 数据源地址 $.cxSelect.defaults.url = '${ctx }/js/com/cityData.min.json'; // 设置默认值及选项标题 $('#schoolarea').cxSelect({ selects: ['province', 'city', 'area'], emptyStyle: 'none' }); $('#educationarea').cxSelect({ selects: ['province2', 'city2', 'area2'], emptyStyle: 'none' }); }); </script> <ul class="back_rigth_inquire"> <li class="content_top margin_t_20"> <%--<div class="name_standard">--%> <%--<span class="left_word">所在学校<i></i></span>--%> <%--<select ></select>--%> <%--<select ></select>--%> <%--<select ></select>--%> <%--<select >请选择学校</option></select>--%> <%--</div>--%> <div > <span class="left_word">所在学校 <i></i></span> <select ></select> <select ></select> <select ></select> <select >请选择学校</option></select> </div> </li> <li> <div > <span class="left_word">所在教育局<i></i></span> <select ></select> <select ></select> <select ></select> <select >请选择教育局</option></select> </div> </li> <br> <%--<li class="content_top margin_t_20">--%> <%--<div class="name_standard">--%> <%--<span class="left_word">所在教育局<i></i></span>--%> <%--<select ></select>--%> <%--<select ></select>--%> <%--<select ></select>--%> <%--<select >请选择教育局</option></select>--%> <%--</div>--%> <%--</li>--%> <p class="back_rigth_inquire_button"> <a class="button_query_view" onclick="queryBySchoolCode()">查询</a> <a class="button_query_reset" onclick="resetSchoolCode()">重置</a> </p> </ul>
json数据 (cityData.min.json):