基于JS实现二级联动自动补全：二级选项依赖一级选项

问题根源 #

1. 运算符错误：你在if判断里用了赋值运算符=，而非相等比较运算符===，导致每个if语句都会执行，最终address被最后一个值addressforoption4覆盖。
2. 未监听输入变化：代码仅在页面加载时执行一次，没有监听城市输入框的内容变化，所以无论后续选择哪个城市，区域输入框的数据源都不会更新。
3. 变量未声明：address变量没有提前声明，会被提升为全局变量，不符合代码规范。

修复后的代码 #

HTML（无需修改）

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<label for="city">➡ City<span style="color:red;">*</span></label>
<input type="text" required name="city" id="city" placeholder="Enter your city name here">
<hr>
<label for="location">➡ Location<span style="color:red;">*</span></label>
<input type="text" required name="location" id="location" placeholder="City location">

JavaScript

$(function() {
  // 城市数据
  const cityList = ["option1", "option2", "option3", "option4"];
  // 城市对应区域的映射表，比多个单独变量更易维护
  const areaMap = {
    option1: ["a1", "a2", "a3", "a4"],
    option2: ["b1", "b2", "b3", "b4"],
    option3: ["c1", "c2", "c3", "c4"],
    option4: ["d1", "d2", "d3", "d4"]
  };

  // 初始化城市自动补全
  $("#city").autocomplete({
    source: cityList,
    // 选中城市时更新区域数据源
    select: function(event, ui) {
      updateAreaSource(ui.item.value);
    }
  });

  // 初始化区域自动补全（默认无数据源）
  const $location = $("#location").autocomplete({
    source: []
  });

  // 监听城市输入框的手动输入变化，实时更新区域数据源
  $("#city").on("input change", function() {
    const selectedCity = $(this).val().trim();
    updateAreaSource(selectedCity);
  });

  // 更新区域自动补全数据源的函数
  function updateAreaSource(city) {
    // 获取对应城市的区域数据，没有则为空数组
    const areaData = areaMap[city] || [];
    // 更新区域输入框的自动补全数据源
    $location.autocomplete("option", "source", areaData);
  }
});

关键改进点 #

• 用对象映射表替代多个独立的区域变量，更易维护和扩展。
• 监听城市输入框的select事件（自动补全选中时）和input/change事件（手动输入时），实时更新区域数据源。
• 使用===进行相等判断（修复原代码的运算符错误）。
• 提前声明所有变量，避免全局污染。
• 封装更新数据源的函数，代码更简洁复用。

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