JQuery打造下拉框联动效果

JQuery打造下拉框联动效果

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

--------------------------------------分割线 --------------------------------------

jQuery权威指南 PDF版中文+配套源代码

jQuery实战 中文PDF+源码

《jQuery即学即用（双色）》 PDF+源代码

锋利的jQuery(第2版) 完整版PDF+源码

jQuery完成带复选框的表格行高亮显示

jQuery基础教程(第4版) PDF 完整高清版+配套源码

--------------------------------------分割线 --------------------------------------

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);
}

jQuery 的详细介绍：请点这里
jQuery 的下载地址：请点这里

本文永久更新链接地址：