基于js的二级联动甚至是多级联动的封装

前言：

自从大学毕业后，第一次走上工作岗位。为了以后更好的工作，瞻仰了前辈们的经验，把自己的工作中经历的难题或者有用的资源，写入博客中，以便日后能给我甚至是大家一些帮助。

原理：

实现两个select标签，分别是产品类型和产品，典型的二级联动关系。页面加载完成后，前台从后台获取第一个select的值：产品类型，

当第一个select的"产品类型值"发生改变时，触发js的change方法，在该方法中，应用根据jquery的ajax，又一次从后台获取第二个select

的"产品"值。这样以此类推，实现多级联动。在本实例中只实现二级联动。

前台jsp代码：

<span style="font-size:14px;">  <select name="productType" id="productType">
  	<option value="0">-请选择-</option>
  </select>
  <select name="product" id="product">
  	<option value="1">-请选择-</option>
  </select></span>

js的多级联动封装代码：

/**
*@param config:该配置信息必须有url、data和html的select标签Id
*/
function Linkage(config1){
	var config = config1;
	this.init = function(){
		this.getLinkageData();
	};
	/**
	 * ajax请求，根据config信息从后台获取数据
	 */
	this.getLinkageData = function(){
		 $.ajax({
	         type: config.type||"get",
	         url: config.url,
	         data:config.data,
	         success: setProductData = function(data){
	            var jsonData = eval(data);
	     	    for(var i=0;i<jsonData.length;i++){
	     	    	$("#"+config.selectId).append("<option value='"+jsonData[i].id+"'>" + jsonData[i].name + "</option>");
	     	    }
	         }
	     });
	};
	
	/**
	 * 根据选中ID获取相关数据
	 */
	this.getProductsDataById = function(config1){
		//alert(value);
		config = config1;
		$("#"+config.selectId).empty();
		$("#"+config.selectId).append("<option>-请选择-</option>");
		this.getLinkageData();
	};
  };

前台调用该js联动封装类：

<script type="text/javascript">
    $(document).ready(function(){
        //新建多级联动封装类，构造函数传递访问url、访问数据data和select标签Id
    	var linkage = new Linkage({data:"method=loadProductType&e="+Math.random(),url:"ProductAction",selectId:"productType"});
    	//初始化第一个select标签数据
	linkage.init();
	//根据第一个select选中数据的值获取第二个select标签数据
    	$("#productType").change(function () {
		//获取第二个select的数据，该方法传递的参数data比第一个select多了id值(是第一个select的选中值)
            	linkage.getProductsDataById({data:"method=loadProductsByType&id="+this.value+"&e="+Math.random(),url:"ProductAction",selectId:"product"});
	});
	//多级联动，以此类推
	$("...").change(function(){
    	.
   	.
    	.
	});
});
</script>

验证结果：