JQuery打造省市下拉框联动效果
发布时间:2020-12-14 22:54:22 所属栏目:资源 来源:网络整理
导读:做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重新拼接刷新的内容。用JQuery实现比较容
做联动效果,若是用纯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); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |