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="" onchange="getschoollist();"></select>--%>
<%--<select id="city" name="city3" class="city" data-value="" onchange="getschoollist();"></select>--%>
<%--<select id="area" name="area3" class="area" data-value="" onchange="getschoollist();"></select>--%>
<%--<select id="schoolCode" name="scode" onchange="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="" onchange="getschoollist();"></select>
<select id="city" name="city3" class="city" data-value="" onchange="getschoollist();"></select>
<select id="area" name="area3" class="area" data-value="" onchange="getschoollist();"></select>
<select id="schoolCode" name="scode" onchange="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="" onchange="getEducationBureaulist();"></select>
<select id="city2" name="city3" class="city2" data-value="" onchange="getEducationBureaulist();"></select>
<select id="area2" name="area3" class="area2" data-value="" onchange="getEducationBureaulist();"></select>
<select id="code" name="scode" onchange="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="" onchange="getEducationBureaulist();"></select>--%>
<%--<select id="city2" name="city3" class="city" data-value="" onchange="getEducationBureaulist();"></select>--%>
<%--<select id="area2" name="area3" class="area" data-value="" onchange="getEducationBureaulist();"></select>--%>
<%--<select id="code" name="scode" onchange="getsemesterlist()"><option value="">请选择教育局</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):