习课省市区的三级联动（cxselect的使用）

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）：