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 sourceList=(List) dataCubeNodeManageService.findNodeAllList();
		String parentId=request.getParameter("parentId");
		model.addAttribute("parentId", parentId);
		model.addAttribute("sourceList", sourceList);
		return "mdx/mdxXmlInfoForm";
	}

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

 
          

           

             

               数据源名称：
                *
               

          
		请选择
	 
		 
  
			selected="selected" >
 
  
			${list.nodeNames}
 
  
		
	
	
      

    

  

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

               主表名称：
                *
               

	
	
	
     

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

function jumpPage(){
		var sel2 = $("#primaryTablename"); 
		var selVal = $("#primaryTablenameval").val(); 
        	sel2.empty(); 
		sel2.append("请选择");
		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("" + data[i].tableName + "");
				}else {
sel2.append("" + data[i].tableName + "");
				} 
			}
			       
		}  
	});
	}
}

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

/**
	 * 异步加载下拉框数据
	 */
	@RequestMapping(value = "jumpPage", method = RequestMethod.POST)
	@ResponseBody
    public String jumpPage(HttpServletRequest request){
		String msg="";
		try {
			String source=request.getParameter("source");
			List> msgList=new ArrayList>();
			List dataCubeDatebaseTableList =	dataCubeDatebaseTableService.findTableList(source);
			if(dataCubeDatebaseTableList.size()>0){
				for (int i = 0; i < dataCubeDatebaseTableList.size(); i++) {
					DataCubeDatebaseTable dataCubeDatebaseTable=dataCubeDatebaseTableList.get(i);
					Map msgMap=new HashMap();
					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用的熟练了，回过头来再进行修改。