JavaScript：select标签选项被选中时如何创建对应li元素？

完全不需要遍历所有8个选项，当前需求仅需获取选中态对应的单个选项内容即可，逻辑和选项总数量无关。

原代码存在的问题 #

• 未声明selectTag对应的DOM节点，运行时会直接抛出未定义错误
• 取值逻辑错误：selectTag.options.text 是无效写法，options是所有<option>组成的类数组集合，本身不存在text属性
• 未绑定select的选中变化触发事件，ddselect函数不会在选项切换时自动执行
• 漏了核心渲染逻辑：没有把创建好的li节点追加到.list容器中，仅做了控制台打印

可直接运行的完整实现 #

// 替换为你实际的select选择器，比如对应id、类名
const selectTag = document.querySelector('select');
const list = document.querySelector('.list');

const ddselect = () => {
  // 仅读取当前选中索引对应的option节点，无需遍历全量选项
  const selectedOption = selectTag.options[selectTag.selectedIndex];
  // 可按需跳过占位类的空选项
  if (!selectedOption.value) return;

  // 用textContent赋值比innerHTML更安全，避免潜在XSS风险
  const listItem = document.createElement('li');
  listItem.textContent = selectedOption.text;

  // 将生成的li追加到列表容器完成渲染
  list.appendChild(listItem);
};

// 绑定select的选中变化事件，选项切换时自动执行生成逻辑
selectTag.addEventListener('change', ddselect);

可选优化 #

• 若需避免同一选项被重复选中后生成重复li，可在生成前增加判断：比如校验列表中是否已存在对应文本的li，或选中后将当前option设为禁用状态
• 若初始页面加载时就需要把当前默认选中的选项渲染为li，可在事件绑定完成后手动执行一次ddselect()

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