JQuery+Ajax实现下拉框联动（省市联动）

近日在项目中碰见下拉框联动的问题，要求异步刷新，百度了好多，虽然讲的很详细，但是对于初级的我来说，使用起来还是有难度，一下提供几个别人的纯jQuery实现的省市联动：

http://www.helloweba.com/view-blog-188.html

http://www.jb51.net/article/41619.htm

    因为本人刚接触jQuery，对使用还不是很到位，所以就根据自己的想法写了一个下拉框联动的实例，分享出来，方法比较简单和低级， 仅供初学者参考。

 

    项目说明：采用的springMVC+hibernate框架

    首先是需求： 项目要求在新增页面中添加下拉联动，（点击数据源，显示对应可供选择的主表信息列表），如图：

思路：首先，将数据源信息，在controller中全部查寻到，并且返回到页面中，这样，一开始，第一级下拉列表（数据源），然后在数据源下拉框中增加 onchange()事件，在onchange()事件中拼出 上图，主表名称 的下拉菜单。

程序实现：

    第一步：查询到一级下拉框所需的值。并返回页面。

/**
	 * 新增
	 * @return
	 */
	@RequestMapping(value = "createForm")
	public String createForm(Model model,HttpServletRequest request){
List<DataCubeNodeManage> sourceList=(List<DataCubeNodeManage>) dataCubeNodeManageService.findNodeAllList();
		String parentId=request.getParameter("parentId");
		model.addAttribute("parentId", parentId);
		model.addAttribute("sourceList", sourceList);
		return "mdx/mdxXmlInfoForm";
	}

 第二步：在页面中取值，并且向一级下拉框增加， onchange()事件，

 
          <div class="form-group">
           <div class="col-xs-12">
             <div class="">
               <label class="control-label col-xs-3 text-right">数据源名称：
               </label><font color="red"> *</font>
               <div class="col-xs-8">
          <select name="source" id="source" class="form-control  validate[required]" οnchange="jumpPage();">
		<option value="">请选择</option>
	 <c:forEach items="${sourceList}" var="list">
		<option value="${list.id}" 

<span style="white-space:pre">			</span><c:if test="${obj.source==list.id }">selected="selected"</c:if> >

<span style="white-space:pre">			</span>${list.nodeNames}

<span style="white-space:pre">		</span></option>
	</c:forEach>
	</select>
      </div>
    </div>
  </div>
</div>

需要注意的是， 一级下拉有值，但是二级下拉为一个空的 <select></select>标签

<div class="">
               <label class="control-label col-xs-3 text-right">主表名称：
               </label><font color="red"> *</font>
               <div class="col-xs-8">
	<select name="primaryTablename" id="primaryTablename" class="form-control  validate[required]">
	</select>
	<input type="hidden" id="primaryTablenameval"  value="${obj.primaryTablename}" >
     </div>
</div>

第三步：在onchange()方法中，拼出二级下拉菜单

function jumpPage(){
		var sel2 = $("#primaryTablename"); 
		var selVal = $("#primaryTablenameval").val(); 
        <span style="white-space:pre">	</span>sel2.empty(); 
		sel2.append("<option value=''>请选择</option>");
		source=$("#source").val();
		if($('#selectForm').validationEngine('validate')){
			$('#selectForm').ajaxSubmit({
			      url: "${ctx }/mdxXmlInfoController/jumpPage?source="+source,
			      success: function(data){ 
			        var data = eval('(' + data + ')');
			        for ( var i = 0; i < data.length; i++) {
				var col = data[i];
				if(selVal==data[i].id) {
 sel2.append("<option value=" + data[i].id + " selected=\"true\">" + data[i].tableName + "</option>");
				}else {
sel2.append("<option value=" + data[i].id + ">" + data[i].tableName + "</option>");
				} 
			}
			       
		}  
	});
	}
}

 第四步：在controller中 得到并组织二级下拉菜单（实例中为：主表名）数据。

/**
	 * 异步加载下拉框数据
	 */
	@RequestMapping(value = "jumpPage", method = RequestMethod.POST)
	@ResponseBody
    public String jumpPage(HttpServletRequest request){
		String msg="";
		try {
			String source=request.getParameter("source");
			List<Map<String,String>> msgList=new ArrayList<Map<String,String>>();
			List<DataCubeDatebaseTable> dataCubeDatebaseTableList =	dataCubeDatebaseTableService.findTableList(source);
			if(dataCubeDatebaseTableList.size()>0){
				for (int i = 0; i < dataCubeDatebaseTableList.size(); i++) {
					DataCubeDatebaseTable dataCubeDatebaseTable=dataCubeDatebaseTableList.get(i);
					Map<String,String> msgMap=new HashMap<String, String>();
					msgMap.put("id", dataCubeDatebaseTable.getId());
					msgMap.put("tableName", dataCubeDatebaseTable.getTableName());
					msgList.add(msgMap);
				}
				if(msgList.size()>0){
					msg=JsonUtil.beanToJson(msgList);
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
    	return msg;
    }

 第五步：运行结果

总结：由于本项目是建立在springMVC+hibernate 框架下的，有些方法是封装的，可能无法展示，总之，思路就是这样，可能有些 繁琐，有些复杂， 但是 功能实现了。 初学者可以借鉴。 等以后 jQuery用的熟练了，回过头来再进行修改。