jquery如何实现二级联动

这篇文章将为大家详细讲解有关jquery如何实现二级联动，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jQuery 实现二级联动

前提条件

• 服务器端提供 API 或接口获取级联数据（省市、商品分类等）
• HTML 页面有用于展示级联数据的下拉菜单

步骤

1. 响应父级下拉菜单更改

在父级下拉菜单（通常是省份）上绑定 change 事件，当其值发生改变时触发。

$("#parent-select").change(function() {
  // 获取选中的父级值
  var parentId = $(this).val();

  // 触发子级下拉菜单的级联加载
  loadChildData(parentId);
});

2. 加载子级数据

创建 loadChildData 函数，它根据父级值向服务器端 API 发送请求，获取相应子级数据。

function loadChildData(parentId) {
  $.ajax({
    url: "/api/child-data",
    method: "GET",
    data: { parentId: parentId },
    success: function(response) {
      // 将子级数据填充到子级下拉菜单
      var options = "";
      for (var i = 0; i < response.length; i++) {
        options += `<option value="${response[i].id}">${response[i].name}</option>`;
      }
      $("#child-select").html(options);
    }
  });
}

3. 下拉菜单选项生成

在加载子级数据成功时，根据服务器端返回的数据生成子级下拉菜单的选项。

function generateChildOptions(data) {
  var options = "";
  for (var i = 0; i < data.length; i++) {
    options += `<option value="${data[i].id}">${data[i].name}</option>`;
  }
  return options;
}

4. 更改子级下拉菜单

在子级下拉菜单上绑定 change 事件，当其值发生改变时触发，此时可以根据子级值进行进一步的级联或其他操作。

$("#child-select").change(function() {
  // 获取选中的子级值
  var childId = $(this).val();

  // 根据子级值进行进一步的级联或操作
});

实践示例

HTML 代码：

<select id="parent-select">
  <option value="1">省份 1</option>
  <option value="2">省份 2</option>
  <option value="3">省份 3</option>
</select>

<select id="child-select">
  <option value="">请选择城市</option>
</select>

JS 代码：

$(document).ready(function() {
  $("#parent-select").change(function() {
    loadChildData($(this).val());
  });
});

function loadChildData(parentId) {
  $.ajax({
    url: "/api/child-data",
    method: "GET",
    data: { parentId: parentId },
    success: function(response) {
      var options = generateChildOptions(response);
      $("#child-select").html(options);
    }
  });
}

function generateChildOptions(data) {
  var options = "";
  for (var i = 0; i < data.length; i++) {
    options += `<option value="${data[i].id}">${data[i].name}</option>`;
  }
  return options;
}

API 返回示例：

[
  {
    "id": 1,
    "name": "城市 1"
  },
  {
    "id": 2,
    "name": "城市 2"
  }
]

以上就是jquery如何实现二级联动的详细内容，更多请关注编程学习网其它相关文章！