求助：实现菜单选择后从JSON加载子选项的联动功能

现有列表菜单点击后可将选中值同步到distId下拉框，需在此基础上，通过指定JSON数据实现区域（dist）与街道（ward）的联动：点击列表中的区域项，wardId下拉框自动加载对应区域的街道选项。

完整实现代码 #

HTML 结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li><a href="#" class="city-link" data-city="city-one">city-one</a>
  <ul class="list-dist">
    <li><a href="#" class="dist-item" data-dist="dist 1">dist 1</a></li>
    <li><a href="#" class="dist-item" data-dist="dist 2">dist 2</a></li>
    <li><a href="#" class="dist-item" data-dist="dist 3">dist 3</a></li>
  </ul>
</li>

<select name="distId" id="distId">
  <option value="dist 1">dist 1</option>
  <option value="dist 2">dist 2</option>
  <option value="dist 3">dist 3</option>
</select>

<select id="wardId">
</select>

JavaScript 逻辑 #

// 定义区域-街道映射数据
const areaData = {
  "city-one": {
    "dist 1": [
      {"name": "wards 1"},
      {"name": "wards 2"},
      {"name": "wards 3"}
    ],
    "dist 2": [
      {"name": "wards 4"},
      {"name": "wards 5"},
      {"name": "wards 6"}
    ]
  },
  "city-two": {
    "dist zxc": [
      {"name": "wards z"},
      {"name": "wards x"},
      {"name": "wards c"}
    ],
    "city xyz": [
      {"name": "wards x"},
      {"name": "wards y"},
      {"name": "wards z"}
    ],
    "dist abc": [
      {"name": "wards a"},
      {"name": "wards b"},
      {"name": "wards c"}
    ]
  }
};

// 默认选中城市
let currentCity = "city-one";

// 城市切换事件（支持多城市扩展）
$(".city-link").click(function(e) {
  e.preventDefault();
  currentCity = $(this).data("city");
});

// 区域列表点击事件
$(".list-dist li a.dist-item").click(function(e) {
  e.preventDefault();
  const selectedDist = $(this).data("dist");
  
  // 同步选中值到distId下拉框
  $("#distId").val(selectedDist);
  
  // 切换distId选项显示状态
  $("#distId option").each(function() {
    $(this).toggle($(this).val() === selectedDist);
  });
  
  // 加载对应街道数据
  loadWards(selectedDist);
});

// 加载街道下拉选项
function loadWards(distName) {
  const wardSelect = $("#wardId");
  wardSelect.empty();
  
  // 获取当前城市下的街道数据
  const wards = areaData[currentCity]?.[distName];
  
  if (wards?.length) {
    wards.forEach(ward => {
      wardSelect.append(`<option value="${ward.name}">${ward.name}</option>`);
    });
  } else {
    wardSelect.append("<option value=''>暂无街道数据</option>");
  }
}

核心优化点 #

• 替换原有的class标识为data-*属性，避免空格导致的选择器错误
• 将数据与逻辑分离，便于后续维护和扩展多城市/区域
• 封装街道加载逻辑，统一处理清空、生成选项及无数据场景
• 保留原有的dist下拉框同步逻辑，确保功能兼容

内容的提问来源于stack exchange，提问作者Jayzz