如何通过jQuery实现select下拉框的联动效果

        由于项目需要，小编需要实现三个HTML的select下拉框联动的效果，如果考虑到实际用户体验的话，直接用异步刷新的方式操作DOM是最好的选择，这里小编直接使用了jQuery作为DOM操作的工具，直接操作，完成了对于下拉框的操作，下面是实现方法：

一、页面效果

        如图，有这么两个下拉框，当选择上面的类型的时候，下面的动物种类就会跟着去变化：

这里是牛的分类这里是羊的分类

        然后，我们来看一下JSP页面的select代码

      所属类型：
      
                            
            
		请选择
		selected="selected">宠物羊
		selected="selected">宠物牛
	    
     

这个是类型选择的

   动物分类:
   

       
               选择动物分类
               
			selected="selected">${c.classifyName}
		
	
   

这个是动物分类的

二、JS代码实现

        由于我们的整个事件触发点是类型的选取，所以我在网上查了查关于select的改变选项的事件，于是发现了change这个事件，那么我们就以这个为起点来展示一下实现的过程：

      1、首先，我们看到了选择类型的select的ID是packType，所以我们需要在document的ready里面给这个select写入一个触发事件：

     先上全部的代码：

$(document).ready(function() {
$("#packType").bind("change",function(){
        var typeId = $(this).val();        
        var url = BASE_URL + "/back/cmnPack/findClassifyByType";
        $.post(url,{"typeId":typeId},function(rd){
            if(rd==undefined){
                layer.msg("未查询到动物分类数据！");
            }else{
            	empty_animalClassify();
            	empty_manageFee();
            	$('.price').text('');
            	//input框清空
            	$("#appointDiscount").val("");
            	var dataObj=eval("("+rd+")");//转换为json对象 
            	for(var i=0;i"+classifyName+"");
            	}                
            }
        })        
});
}

     2、我们通过这个触发事件，先获得我们的分类ID：

var typeId = $(this).val();

然后通过Ajax的方法，把这个ID传入到后台去取我们需要更新的数据，也就是这个jQuery带的Ajax代码：

$.post(url,{"typeId":typeId},function(rd){

注意：URL里面的BASE_URL是我们在common.js中定义的静态变量。

     3、获得到数据之后，我们需要先进行动物分类的select的清空操作，empty_animalClassify();这个方法就是清空用的，具体代码如下：

function empty_animalClassify(){
	$("#animalClassifyId").empty();
	$("#animalClassifyId").append("选择动物分类");
}

     4、获得到数据之后，经过简单的判断，我们可以对于回传的json数据进行解析了方法就是用的eval对于回传的数据先对象化，然后进行对象的操作：

var dataObj=eval("("+rd+")");//转换为json对象 
     for(var i=0;i"+classifyName+"");
} 

       其中animalClassifyId为动物分类的select框的ID，我们在这里给他动态添加选项，也就是option，这样之后，我们的动态联动也就做好了。

需要思考的：

      其实经历了这次的探索，让我对于jQuery有了新的认识，因为基本所有的操作，包括添加属性，取值，改属性，都可以通过它来完成，并且经过在网上查阅，还看到了同样的绑定有不同的写法，这一点是很灵活的，所以下一篇博客我将重点分析一下jQuery对于一个对象的属性添加，赋值等操作的不同方法，以及各有什么好处。