基于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>

验证结果：