当前位置：首页 > jquery

jquery二级联动

2026-04-08 11:28:01jquery

jQuery 实现二级联动的方法

二级联动通常指两个下拉菜单（<select>）之间的动态关联，即第一个下拉菜单的选择会影响第二个下拉菜单的选项内容。以下是实现方法：

基本HTML结构

创建两个下拉菜单，并为第一个菜单绑定change事件：

jquery二级联动

<select id="province">
  <option value="">请选择省份</option>
  <option value="gd">广东省</option>
  <option value="zj">浙江省</option>
</select>

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

数据准备

使用对象存储二级联动数据：

jquery二级联动

const cityData = {
  gd: ["广州", "深圳", "珠海"],
  zj: ["杭州", "宁波", "温州"]
};

jQuery 事件绑定

监听省份下拉菜单的变化，动态更新城市下拉菜单：

$("#province").change(function() {
  const provinceId = $(this).val();
  const $citySelect = $("#city");

  $citySelect.empty().append('<option value="">请选择城市</option>');

  if (provinceId && cityData[provinceId]) {
    $.each(cityData[provinceId], function(index, cityName) {
      $citySelect.append(`<option value="${cityName}">${cityName}</option>`);
    });
  }
});

动态加载数据（可选）

如果需要从后端加载数据：

$("#province").change(function() {
  const provinceId = $(this).val();

  $.get("/api/cities?province=" + provinceId, function(data) {
    const $citySelect = $("#city");
    $citySelect.empty();

    $.each(data, function(index, item) {
      $citySelect.append(`<option value="${item.id}">${item.name}</option>`);
    });
  });
});

注意事项

确保在DOM加载完成后执行脚本，可以将代码放在$(document).ready()中
对于动态生成的元素，可能需要使用事件委托
清空二级菜单时保留默认选项（如“请选择”）
考虑添加加载状态提示（如禁用下拉菜单或显示loading图标）

完整示例

<script>
$(function() {
  const cityData = {
    gd: ["广州", "深圳", "珠海"],
    zj: ["杭州", "宁波", "温州"]
  };

  $("#province").change(function() {
    const provinceId = $(this).val();
    const $citySelect = $("#city");

    $citySelect.empty().append('<option value="">请选择城市</option>');

    if (provinceId && cityData[provinceId]) {
      $.each(cityData[provinceId], function(index, cityName) {
        $citySelect.append(`<option value="${cityName}">${cityName}</option>`);
      });
    }
  });
});
</script>

标签: jquery