省市區列表三級聯動查詢
阿新 • • 發佈:2019-01-09
如果下面沒有幫助到你請連結:http://blog.csdn.net/xuanzhangran/article/details/55049198
查詢的實現的效果如下:
(1):點選選擇省份,彈出省份列表。
(2):點選內蒙古,第二個聯動預設為呼和浩特,同樣點選呼和浩特,下邊出現所有的內蒙的城市,同樣:當點選任意一個市,區域就會聯動出來。此處略。
(3):查詢完畢後:頁面依然有查詢的條件。
前臺:
<script src="<%=basePath%>js/business/suRegionAddress.js" type="text/javascript">//引入js
</script>
<script type="text/javascript">
window.onload=function(){
//所在區域聯動列表
setup();//下面有載入的js程式碼
}
</script>
<div class="row">
<span>收貨地址:</span>
<select style="WIDTH: 90px;height:30px;" id="province" name="provice" >
<option>選擇省份</option >
<c:forEach items="${provinceList}" var="province">
<c:if test="${province.name == proviceName }">
<option value="${province.id}" selected="selected">${province.name}</option>
</c:if>
<c:if test="${province.name != provinceName}" >
<option value="${province.id}">${province.name}</option>
</c:if>
</c:forEach>
</select>
<select style="WIDTH: 90px;height:30px;" id="city" name="city" >
<c:if test="${not empty cityName}">
<option value="${cityName}">${cityName}</option>
</c:if>
<c:if test="${empty cityName}">
<option value="">選擇城市</option>
</c:if>
</select>
<select style="WIDTH: 90px;height:30px;" id="city" name="city" >
<c:if test="${not empty districtName}">
<option value="${districtName}">${districtName}</option>
</c:if>
<c:if test="${empty districtName}">
<option value="">選擇區域</option>
</c:if>
</select>
後臺:
@RequestMapping("/userList.html")
public String businessFpData(Model model, HttpServletRequest request,
@RequestParam(value = "provice", required = false) String proviceName,
@RequestParam(value = "city", required = false) String cityName,
@RequestParam(value = "city", required = false) String districtName,
@RequestParam(value="pageNo",defaultValue="1")Integer pageNo) {
Map<String, Object> map = new HashMap<String, Object>();
if(StringUtils.isBlank(proviceName) || proviceName.equals("選擇省份")){
proviceName = null;
}else{
SuRegion provice =(SuRegion)regionServer.selectByPrimaryKey(Long.parseLong(proviceName));
proviceName = provice.getName();
}
if(StringUtils.isBlank(cityName)|| cityName.equals("選擇城市")){
cityName = null;
}else{
if(isNumeric(cityName)){//是數字
SuRegion city =(SuRegion)regionServer.selectByPrimaryKey(Long.parseLong(cityName));
cityName = city.getName();
}
}
if(StringUtils.isBlank(districtName)|| districtName.equals("選擇城市")){
districtName = null;
}else{
if(isNumeric(districtName)){//是數字
SuRegion district =(SuRegion)regionServer.selectByPrimaryKey(Long.parseLong(districtName));
districtName = district.getName();
}
}
map.put("proviceName", proviceName);
map.put("cityName", cityName);
map.put("districtName", districtName);
List<SuUser> list = userService.userList(map);//查詢
//查詢之後查詢條件返回儲存到頁面
model.addAttribute("proviceName", proviceName);
model.addAttribute("cityName", cityName);
model.addAttribute("districtName", districtName);
//載入進入頁面的時候將所有的省份查出來:方法在下邊的mapping裡
model.addAttribute("provinceList", regionServer.getAllProvices());// 獲取省份列
}
//根據選中的省份或者城市聯動
/**
* 根據省份id獲取城市資料後直接使用@ResponseBody裝成json資料
*
* @param id
* 省份ID
* @param response
* @return
* @return
*/
@RequestMapping("/getCityByProvinceId.html")
@ResponseBody
public String getCityByProvinceId(
@RequestParam(value = "id", required = false) Long id) {
List<SuRegion> cityList = suRegionServer.getAllCitys(id);
return JSON.toJSONString(cityList);
}
/**
* 根據城市id獲取區域資料後直接使用@ResponseBody裝成json資料
*
* @param id
* @return
*/
@RequestMapping("/getAreaByCityId.html")
@ResponseBody
public String getAreaByCityId(
@RequestParam(value = "id", required = false) Long id) {
List<SuRegion> areaList = suRegionServer.getAllAreas(id);
return JSON.toJSONString(areaList);
}
js程式碼:suRegionAddress.js
/***
* 省市區三級聯動:
* 三個下拉列表id分別是:province、city、area
* @returns
*/
function setup() {
//獲取城市
$("#province").click(function () {
$.ajax({
url: "/business/getCityByProvinceId.html?id="+$("#province").val(),
type: "POST",
dataType:'json',
success:function(data){
$("#city").empty(); //清空下拉列表
$.each(data,function(i,item){
$("#city").append(" <option value='" + item.id + "'>" + item.name + "</option>");
});
}
});
});
//獲取區縣
$("#city").click(function () {
$.ajax({
url: "/business/getAreaByCityId.html?id="+$("#city").val(),
type: "POST",
dataType:'json',
success:function(data){
$("#area").empty(); //清空下拉列表
$.each(data,function(i,item){
$("#area").append(" <option value='" + item.id + "'>" + item.name + "</option>");
});
}
});
});
}
mapping的sql語句
<!-- 獲取省份列表 -->
<select id="getAllProvices" resultMap="BaseResultMap" parameterType="com.idorabox.entity.SuRegion">
select
<include refid="Base_Column_List" />
from tbl_su_region
where grade = 1
</select>
<select id="getAllCitys" resultMap="BaseResultMap" parameterType="com.idorabox.entity.SuRegion">
select
<include refid="Base_Column_List" />
from tbl_su_region
where grade = 2
<if test="id != null">
and parent = #{id,jdbcType=BIGINT}
</if>
</select>
<!--獲取 區縣列表 -->
<select id="getAllAreas" resultMap="BaseResultMap" parameterType="com.idorabox.entity.SuRegion">
select
<include refid="Base_Column_List" />
from tbl_su_region
where grade = 3
<if test="id != null">
and parent = #{id,jdbcType=BIGINT}
</if>
</select>