-------controller--开始-------------
/**
* 地区获取级联数据
* @param request
* @param response
* @param selLv
* 1:获取省, 2:获取城市
* @param cdVal
* 选择的省市的 id
* @return out json
*/
public String areaCheck(HttpServletRequest request,
HttpServletResponse response,
@RequestParam(value = "selLv", required = false) String selLv,
@RequestParam(value = "cdVal", required = false) String cdVal) {
try {
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
if (StringUtils.isNotBlank(selLv) && StringUtils.isNotBlank(cdVal)) {
Gson gson = new Gson();
String obj = "";
if ("1".equals(selLv)) { // 1代表省
List<DicMdmProvince> list = dicMdmProvinceService
.findByAreaCd(Long.parseLong(cdVal), null, null);
obj = gson.toJson(list);
} else if ("2".equals(selLv)) { //2代表 城市
List<DicMdmCity> list = dicMdmCityService.findByProvinceCd(
Long.parseLong(cdVal), null, null);
obj = gson.toJson(list);
}
out.print(obj);
out.flush();
out.close();
}
} catch (IOException e) {
e.printStackTrace();
}
return "";
-
----
--controller--结束-------------
-------js 开始--------------
<script type="text/javascript">
$(function(){
//首先根据省选择市
//首先根据省选择市
$("#selArea").change(function(){
var valStr = $('#selArea').val();
$.ajax({
type: "get",
url: win$.url("areaCheck"),
data: {'selLv': 1, 'cdVal': valStr},
success: function(data){
var msg = eval('(' + data + ')');
$('#selProvince').empty().append('<option value="">请选择</option>');
$.each(msg, function(i, val) {
$('#selProvince').append('<option value="' + val.provinceCd + '">' + val.provinceName + '</option>');
});
}
});
});
//再根据市选择区
//再根据市选择区
$("#selProvince").change(function(){
var valStr = $('#selProvince').val();
$.ajax({
type: "get",
url: win$.url("areaCheck"),
data: {'selLv': 2, 'cdVal': valStr},
success: function(data){
var msg = eval('(' + data + ')');
$('#selCity').empty().append('<option value="">请选择</option>');
$.each(msg, function(i, val) {
$('#selCity').append('<option value="' + val.cityCd + '">' + val.cityName + '</option>');
});
}
});
});
});
</script>
-------js 结束--------------
-
------页面显示参考--开始------------------
<tr>
<td colspan="8">
<span class="label"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp地区:</span>
<!-- 区域-->
<select name="searchAreaName" id="selArea" class="select" style="width:105px">
<option value="" selected="selected">请选择</option>
<c:forEach var="area" items="${dicMdmArea }" >
<c:choose>
<c:when test="${area.areaCd eq param.searchAreaName}">
<option value="${area.areaCd}" selected="selected">${area.areaName}</option>
</c:when>
<c:otherwise>
<option value="${area.areaCd}">${area.areaName}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>&nbsp
<!-- 省份-->
<input type="hidden" id="Provinceid" value="${param.searchProvinceName}"/>
<select name="searchProvinceName" id="selProvince" class="select" style="width:105px">
<option value="" selected="selected" >请选择</option>
</select>&nbsp
<!-- 城市-->
<input type="hidden" id="Cityid" value="${param.searchCityName}"/>
<select name="searchCityName" id="selCity" class="select" style="width:105px">
<option value="" selected="selected">请选择</option>
</select>
</td>
</tr>
- ------页面显示--开始------------------
<tr>
<td colspan="8">
<span class="label"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp地区:</span>
<!-- 区域-->
<select name="searchAreaName" id="selArea" class="select" style="width:105px">
<option value="" selected="selected">请选择</option>
<c:forEach var="area" items="${dicMdmArea }" >
<c:choose>
<c:when test="${area.areaCd eq param.searchAreaName}">
<option value="${area.areaCd}" selected="selected">${area.areaName}</option>
</c:when>
<c:otherwise>
<option value="${area.areaCd}">${area.areaName}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>&nbsp
<!-- 省份-->
<input type="hidden" id="Provinceid" value="${param.searchProvinceName}"/>
<select name="searchProvinceName" id="selProvince" class="select" style="width:105px">
<option value="" selected="selected" >请选择</option>
</select>&nbsp
<!-- 城市-->
<input type="hidden" id="Cityid" value="${param.searchCityName}"/>
<select name="searchCityName" id="selCity" class="select" style="width:105px">
<option value="" selected="selected">请选择</option>
</select>
</td>
</tr>
- ------页面显示--开始------------------