职位名称下拉菜单显示数字而非列表项的技术问题求助

问题根源 #

你用for...in遍历职位名称数组时，迭代变量拿到的是数组的索引（数字形式的字符串），而非数组里的职位名称。所以新创建的Option把索引作为文本和值，导致下拉菜单显示数字。

修复代码 #

修改jobField.onchange事件里的循环部分即可，这里提供两种可靠的写法：

写法1：使用for...of遍历数组元素

jobField.onchange = function() {
  // 清空职位名称下拉菜单（保留默认选项）
  jobTitle.length = 1;
  // 获取当前选中领域对应的职位列表
  const jobList = jobInfo[this.value];
  // 遍历职位列表，添加选项
  for (const jobName of jobList) {
    jobTitle.options[jobTitle.options.length] = new Option(jobName, jobName);
  }
}

写法2：使用数组forEach方法

jobField.onchange = function() {
  jobTitle.length = 1;
  const jobList = jobInfo[this.value];
  jobList.forEach(jobName => {
    jobTitle.options[jobTitle.options.length] = new Option(jobName, jobName);
  });
}

完整修正后的JavaScript代码 #

var jobInfo = {
    "Information Technology and Software Development": ["Senior Frontend Developer", "Data Processing Specialist", "Java Developer"],
    "Digital Marketing": ["Digital Marketing Web Specialist", "Video Editor", "Graphic Designer"],
    "Finance": ["Financial Analyst-SSC", "Accountant", "Specialist, Business Finance (APAC)"]
}
window.onload = function() {
  var jobField = document.getElementById("job-field");
  var jobTitle = document.getElementById("job-title");
  for (var x in jobInfo) {
    jobField.options[jobField.options.length] = new Option(x, x);
  }
  // 修复后的onchange事件
  jobField.onchange = function() {
    jobTitle.length = 1;
    const jobList = jobInfo[this.value];
    for (const jobName of jobList) {
      jobTitle.options[jobTitle.options.length] = new Option(jobName, jobName);
    }
  }
}

说明 #

• for...of是遍历数组元素的标准方式，直接拿到数组里的职位名称，避免了索引的问题。
• forEach方法更简洁，适合数组的遍历操作，同样能直接获取每个职位名称。

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