1,api:
http://www.jq22.com/jquery-info3238
2,demo:
http://blog.csdn.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 id="province" name="province3" class="province" data-value="" οnchange="getschoollist();"></select>--%> <%--<select id="city" name="city3" class="city" data-value="" οnchange="getschoollist();"></select>--%> <%--<select id="area" name="area3" class="area" data-value="" οnchange="getschoollist();"></select>--%> <%--<select id="schoolCode" name="scode" οnchange="getsemesterlist()"><option value="">请选择学校</option></select>--%> <%--</div>--%> <div id="schoolarea"> <span class="left_word">所在学校 <i></i></span> <select id="province" name="province3" class="province" data-value="" οnchange="getschoollist();"></select> <select id="city" name="city3" class="city" data-value="" οnchange="getschoollist();"></select> <select id="area" name="area3" class="area" data-value="" οnchange="getschoollist();"></select> <select id="schoolCode" name="scode" οnchange="getsemesterlist()"><option value="">请选择学校</option></select> </div> </li> <li> <div id="educationarea"> <span class="left_word">所在教育局<i></i></span> <select id="province2" name="province3" class="province2" data-value="" οnchange="getEducationBureaulist();"></select> <select id="city2" name="city3" class="city2" data-value="" οnchange="getEducationBureaulist();"></select> <select id="area2" name="area3" class="area2" data-value="" οnchange="getEducationBureaulist();"></select> <select id="code" name="scode" οnchange="getsemesterlist()"><option value="">请选择教育局</option></select> </div> </li> <br> <%--<li class="content_top margin_t_20">--%> <%--<div class="name_standard">--%> <%--<span class="left_word">所在教育局<i></i></span>--%> <%--<select id="province2" name="province3" class="province" data-value="" οnchange="getEducationBureaulist();"></select>--%> <%--<select id="city2" name="city3" class="city" data-value="" οnchange="getEducationBureaulist();"></select>--%> <%--<select id="area2" name="area3" class="area" data-value="" οnchange="getEducationBureaulist();"></select>--%> <%--<select id="code" name="scode" οnchange="getsemesterlist()"><option value="">请选择教育局</option></select>--%> <%--</div>--%> <%--</li>--%> <p class="back_rigth_inquire_button"> <a class="button_query_view" οnclick="queryBySchoolCode()">查询</a> <a class="button_query_reset" οnclick="resetSchoolCode()">重置</a> </p> </ul>
json数据 (cityData.min.json):