JQuery打造省市下拉框联动效果

前端技术 2023/09/06 JavaScript
做联动效果，若是用纯JavaScript来做，往往需要辅助页面保存需要刷新的结果集，然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后，当前一个下拉框onchange后，同级的后面的下拉框全部清除，然后重新拼接刷新的内容。用JQuery实现比较容易，代码以省市联动效果为例实现。

JSP页面代码如下：
复制代码 代码如下:

<li id=\"base\">
<p>生源地:</p>
<label>
<select id=\"provinceCode\" name=\"provinceCode\" onchange=\"refreshCity()\">
<option value=\"\">全部</option>
<c:forEach items=\"${provinceInfoList}\" var=\"provinceInfo\">
<option value=\"${provinceInfo.code}\">${provinceInfo.provinceName}</option>
</c:forEach>
</select>
</label>
</li>

JavaScript代码如下：
复制代码 代码如下:

function refreshCity(){
if($(\'#provinceCode\').find(\'option:selected\').val() == \"\"){
$(\'#provinceCode\').parent().nextAll(\'lable\').remove();
return;
}
//省份名称
var provinceName = $(\'#provinceCode\').find(\'option:selected\').text();
provinceName = provinceName.substring(0,provinceName.length-4);
// 发出Json请求，查询子下拉框选项数据
$.getJSON(\"<%=basePath%>baseInfo_getCitiesByProvinceId\", {
proviceCode : $(\'#provinceCode\').val()
}, function(data) {
// 如果有子选项，则创建子下拉框
if(data != null){
// 删除下拉框父级<lable>后的所有同级<lable>
$(\'#provinceCode\').parent().nextAll(\'lable\').remove();
var childId = \"city\";
// 判断是否存在下一级下拉框 不存在就创建
if($(\'#\'+childId).length == 0){
// 创建一个<li>并创建一个<select>添加到id为extra的<ul>中
$(\"<lable><select id=\'\"+childId+\"\' name=\'\"+childId+\"\' ></select></li>\").appendTo($(\'#base\'));
}else{
//清空子下拉框内容
$(\'#\' + childId).empty();
}
// 遍历json串，填充子下拉框
$.each(data.city, function(i, item) {
$(\'#\' + childId).append(
\"<option value=\'\"+item.code+\"\'>\" + item.nameAndCode
+ \"</option>\");
});
}
});
}

根据省份获取市的代码如下：
复制代码 代码如下:

public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty(\"code\", proviceCode);
List<CityInfo> cityList = this.provinceAndCityInfoService.getCityListByProperty(\"belongProvinceId\", provinceInfo.getId()+\"\");
// 初始化准备输出的Json串
String cityJson = \"\";
// 遍历集合，构造json串
if (cityList.size() > 0) {
cityJson = \"{\\\"city\\\":[\";
// 拼接查询到的子项
for (int i = 0; i < cityList.size(); i++) {
CityInfo city = cityList.get(i);
String temp = \"{\\\"code\\\":\\\"\" + city.getCode()
+ \"\\\",\\\"nameAndCode\\\":\\\"\" + city.getName()+\"(\"+ city.getCode() +\")\"
+ \"\\\"}\";
// 如果是集合中最后一项，则拼接结束符，否则用\",\"隔开
if (i == cityList.size() - 1) {
cityJson = cityJson + temp + \"]}\";
} else {
cityJson = cityJson + temp + \",\";
}
}
}
// 设置输出的字符集和类型并输出json串
response.setCharacterEncoding(\"UTF-8\");
response.setContentType(\"json\");
response.getWriter().print(cityJson);
}

本文地址：https://www.stayed.cn/item/16129

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案