页面加载后级联表单触发函数时出现报错问题

你遇到的类型错误和下拉框无选项问题，主要来自两个点：

1. 下拉框清空逻辑不当：subitemSel.length = 1会在初始为空的下拉框中生成一个空选项，且没有完全清空原有内容，可能干扰后续选项添加。
2. 未默认触发服务填充：页面加载完成后，第一个下拉框默认选中第一个分类，但未自动触发onchange事件填充对应服务，且for...in遍历数组的方式存在潜在风险（可能意外遍历数组的非索引属性）。

1. 改用subitemSel.options.length = 0完全清空第二个下拉框。
2. 页面加载后手动触发一次服务填充逻辑，确保初始状态下第二个下拉框有对应选项。
3. 用普通for循环或for...of遍历数组，替代for...in避免意外问题。

JavaScript 代码 #

let data = [{
    Category: 'Provident Fund',
    services: ["PF Registration", 'Employee UAN Generation', 'Monthly PF Challan Preparation', 'Monthly PF return filing', 'Employee death claim', 'PF department liasoning', 'PF department audit conduct', 'Form 5A Updation', 'Digital Signature Updation', 'Any other PF related queries', 'Employee claim withdrawl']
  },
  {
    Category: 'Labour Law',
    services: ['S&E registration', 'Professional Tax registration', 'Monthly deposit challans']
  },
  {
    Category: 'Factory Tax',
    services: ['NSDL', 'NPS', 'UPSC', 'GRE', 'IIT']
  }
];

window.onload = function() {
  const itemSel = document.getElementById("category");
  const subitemSel = document.getElementById("services");

  // 用普通for循环遍历数组，避免for...in的潜在问题
  for (let i = 0; i < data.length; i++) {
    itemSel.options[itemSel.options.length] = new Option(data[i].Category, i);
  }

  // 封装服务更新逻辑，便于复用
  function updateServices() {
    // 完全清空第二个下拉框
    subitemSel.options.length = 0;
    // 获取选中的分类索引（转为数字类型）
    const selectedIndex = parseInt(this.value);
    // 遍历对应服务并添加选项
    for (const service of data[selectedIndex].services) {
      subitemSel.options[subitemSel.options.length] = new Option(service, service);
    }
  }

  itemSel.onchange = updateServices;
  // 页面加载完成后手动触发一次，填充默认服务选项
  updateServices.call(itemSel);
}

HTML 代码（可选优化：添加默认提示选项） #

如果需要更友好的用户提示，可以给下拉框添加默认占位选项：

<div class="form-group mt-3">
  <label for="category">Service Category</label>
  <select name="category" class="form-control" id="category">
    <option value="" selected>Select a category</option>
  </select>
</div>
<div class="form-group mt-3">
  <label for="services">Services</label>
  <select name="services" class="form-control" id="services">
    <option value="" selected>Select a service</option>
  </select>
</div>

对应的JS逻辑需要补充空值判断：

function updateServices() {
  subitemSel.options.length = 0;
  // 添加默认提示选项
  subitemSel.options[0] = new Option('Select a service', '');
  const selectedIndex = this.value;
  // 若未选择分类则直接返回
  if (!selectedIndex) return;
  for (const service of data[selectedIndex].services) {
    subitemSel.options[subitemSel.options.length] = new Option(service, service);
  }
}

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