当前位置：首页 > jquery

jquery二级联动

2026-03-16 14:30:50jquery

jQuery 实现二级联动的方法

二级联动通常指两个下拉菜单（<select>）之间的关联，即第一个下拉菜单的选项变化时，第二个下拉菜单的选项动态更新。以下是实现方法：

准备 HTML 结构

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

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

定义数据源

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

绑定 change 事件

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

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

  if (provinceId) {
    const cities = cityData[provinceId];
    $.each(cities, function(index, city) {
      $citySelect.append($('<option>').val(city).text(city));
    });
  }
});

动态加载数据的扩展方法

如果需要从服务器获取数据，可以使用 AJAX：

jquery二级联动

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

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

  if (provinceId) {
    $.get('/api/cities?province=' + provinceId, function(data) {
      $.each(data, function(index, city) {
        $citySelect.append($('<option>').val(city.id).text(city.name));
      });
    });
  }
});

注意事项

确保 DOM 完全加载后再绑定事件，可以将代码放在 $(document).ready() 中
对于大量数据，考虑添加加载状态提示
移动端使用时注意触摸事件的兼容性

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <select id="province">
    <option value="">请选择省份</option>
    <option value="gd">广东省</option>
    <option value="zj">浙江省</option>
  </select>

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

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

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

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

        if (provinceId) {
          const cities = cityData[provinceId];
          $.each(cities, function(index, city) {
            $citySelect.append($('<option>').val(city).text(city));
          });
        }
      });
    });
  </script>
</body>
</html>

标签: jquery