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

最新推荐文章于 2025-07-03 16:16:28 发布

王啸tr1912

最新推荐文章于 2025-07-03 16:16:28 发布

阅读量2.7w

点赞数 12

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： jquery select

本文链接：https://blog.youkuaiyun.com/tr1912/article/details/78767356

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用jQuery实现HTML中两个Select下拉框的联动效果。通过监听Select元素的change事件，利用Ajax从服务器获取数据并动态更新第二个Select框的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、页面效果

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

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

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

<div class="form-group">
      <label for="packType" class="col-sm-3 control-label">所属类型：</label>
      <div class="col-sm-4">                            
            <select id="packType" name="packType" class="form-control">
		<option value="0">请选择</option>
		<option value="1" <c:if test="${cmnPack.packType == 1}">selected="selected"</c:if>>宠物羊</option>
		<option value="2" <c:if test="${cmnPack.packType == 2}">selected="selected"</c:if>>宠物牛</option>
	    </select>
     </div>
</div>

这个是类型选择的

<div class="form-group">
   <label for="animalClassifyId" class="col-sm-3 control-label">动物分类:</label>
   <div class="col-sm-4">
       <select id="animalClassifyId" name="animalClassifyId" class="form-control input-150 input-sm" placeholder="动物分类">
               <option value="">选择动物分类</option>
               <c:if test="${classify != null}">
			<c:forEach items="${classify}" var="c"><option value="${c.animalClassifyId}" <c:if test="${cmnPack.packType == c.animalClassifyId}">selected="selected"</c:if>>${c.classifyName}</option></c:forEach>
		</c:if>
	</select>
   </div>
</div>

这个是动物分类的

二、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<dataObj.length;i++){
            		//更新羊的分类
            		var animalClassifyId=dataObj[i].animalClassifyId;
            		var classifyName=dataObj[i].classifyName;
            		$("#animalClassifyId").append("<option value='"+animalClassifyId+"'>"+classifyName+"</option>");
            	}                
            }
        })        
});
}

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("<option value=''>选择动物分类</option>");
}

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

var dataObj=eval("("+rd+")");//转换为json对象 
     for(var i=0;i<dataObj.length;i++){
        //更新羊的分类
        var animalClassifyId=dataObj[i].animalClassifyId;
        var classifyName=dataObj[i].classifyName;
        $("#animalClassifyId").append("<option value='"+animalClassifyId+"'>"+classifyName+"</option>");
}

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

需要思考的：

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