Jquery之实现无限制级别联动

原创于 2021-09-18 10:08:42 发布 · 400 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #ajax

其它专栏收录该内容

48 篇文章

订阅专栏

本文介绍如何使用JQuery技术实现省、市、县三级联动的下拉选择框。通过AJAX请求动态加载数据，根据用户在上一级的选择更新下级选项。适用于地址选择等场景。

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

下面以三级联动为例

需求：如，有省、市、县(区)三级联动，则当省份值改变，对应的市级值也发生；当市级值选定后，县级值也需要发生改变。

下面说明以Jquery技术为主，也可以使用javaScript代替

步骤：

1. 使用三级联动js.需要引入JQuery的js文件，jquery.js

2. 需要三级联动的数据必须要有父子关系

3. 针对项目要求：第一级联动下拉框的值是后台读取出来的，第二、三级是通过前面联动而发生变化

/**
    *  联动函数
    *  
	*  urls     :需要访问的url路径，带参数
	*  secondId ：第二级联动下拉框的id
	*  threeId  ： 第三级联动下拉框的id
	*  handleId : 当前需要联动(改变)哪个下拉框的id 
	*  fag      : 当前需要联动下拉框是第几级，如 2，3
   */
	function(urls,secondId,threeId,handleId,fag){
		$.ajax({   
            type: "POST",      //默认以post方式
            dataType:"json",   //默认以json形式得到返回的数据
            url: urls,       
            success: function(data) {
            	if(fag==2){
           			$("#"+secondId).html("<option value=''> - 请选择 -</option>");
           			$("#"+threeId).html("<option value=''> - 请选择 -</option>");
           		}else if(fag==3){
           			$("#"+threeId).html("<option value=''> - 请选择 -</option>");
           		}
            	$.each(data,function(idx,values){
            		$("#"+handleId).append("<option value='"+values.id+"'>"+values.countryName+"</option>");
           		});
            },
            error:function(msg){
            	$("#"+secondId).html("<option value=''> - 请选择 -</option>");
            } 
        });
	}