JS新手求助：DOM加载后用自定义对象填充下拉菜单的方法

嘿，我来帮你搞定这个问题！首先得指出你代码里几个关键的小错误，然后一步步教你正确的做法：

1. 先修正选项定义的问题 #

你现在写的categorgySelect（注意拼写错了，应该是categorySelect）和difficultySelect对象里，所有键都是重复的Category/Difficulty——在JavaScript里，对象的键是唯一的，后面的键会直接覆盖前面的，所以你现在的categorySelect实际上只有最后一个值History，这肯定不是你想要的效果。

我们应该把这些选项改成数组（如果只是需要显示文本和值一致的话），或者键值对数组（如果需要值和显示文本不同）：

// 简单数组：值和显示文本一致
const categoryOptions = ['Sports', 'Art', 'Vehicles', 'History'];
const difficultyOptions = ['easy', 'medium', 'hard'];

// 或者键值对数组（如果需要value和显示文本不同，比如值是小写，显示是大写）
// const categoryOptions = [
//   { value: 'sports', text: 'Sports' },
//   { value: 'art', text: 'Art' },
//   { value: 'vehicles', text: 'Vehicles' },
//   { value: 'history', text: 'History' }
// ];

2. 修正DOM加载后的填充逻辑 #

你之前的循环里有几个小问题：

• 遍历对象的方式不对（改成数组后，用forEach更直观）
• opt.value赋值错误，应该是当前选项的值，而不是整个对象
• innerHTML就是你要在下拉菜单里显示给用户看的文本
• 最后是把option添加到categoryPick（你获取的select元素），而不是categorySelect对象

下面是修正后的DOMContentLoaded事件代码：

document.addEventListener('DOMContentLoaded', function() {
  // 填充分类下拉菜单
  categoryOptions.forEach(option => {
    const opt = document.createElement('option');
    // 如果是简单数组，值和文本都是option本身
    opt.value = option;
    opt.innerHTML = option;
    // 如果是键值对数组，就改成：
    // opt.value = option.value;
    // opt.innerHTML = option.text;
    categoryPick.appendChild(opt);
  });

  // 同样的逻辑填充难度下拉菜单
  const difficultyPick = document.querySelector('#difficulty');
  difficultyOptions.forEach(option => {
    const opt = document.createElement('option');
    opt.value = option;
    opt.innerHTML = option.charAt(0).toUpperCase() + option.slice(1); // 首字母大写显示
    difficultyPick.appendChild(opt);
  });
});

3. 完整的修正后JavaScript代码 #

把所有错误修正后，你的JS代码应该是这样的：

const score = document.querySelector('#score');
const output = document.querySelector('#output');
const answerSelect = document.querySelector('#selAnswers');
// 修正选项定义
const categoryOptions = ['Sports', 'Art', 'Vehicles', 'History'];
const difficultyOptions = ['easy', 'medium', 'hard'];

let categoryPick = document.querySelector('#category');

document.addEventListener('DOMContentLoaded', function() {
  // 填充分类下拉
  categoryOptions.forEach(option => {
    const opt = document.createElement('option');
    opt.value = option;
    opt.innerHTML = option;
    categoryPick.appendChild(opt);
  });

  // 填充难度下拉
  const difficultyPick = document.querySelector('#difficulty');
  difficultyOptions.forEach(option => {
    const opt = document.createElement('option');
    opt.value = option;
    opt.innerHTML = option.charAt(0).toUpperCase() + option.slice(1);
    difficultyPick.appendChild(opt);
  });
});

补充说明 #

• opt.innerHTML就是你要在下拉菜单里展示的用户可见文本，比如Sports、Art这些
• opt.value是当用户选中这个选项时，select元素的value属性值，通常和显示文本一致，也可以根据业务需求设置为不同的值（比如后台接口需要的小写标识）
• 一定要等DOMContentLoaded再操作DOM，这样能确保所有页面元素都已经加载完成，不会出现找不到元素的问题

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