JavaScript如何为select添加不重复的option选项？

你代码里的循环条件i < selectStoryByOptions.length - 1是导致无法完全避免重复的核心原因——这个条件会让循环跳过最后一个已存在的选项，当输入文本和最后一个选项文本一致时，检测不到重复就会重复添加。

修复后的基础版本代码 #

const selectStoryBy        = document.querySelector("select#story_by");
const selectStoryByOptions = selectStoryBy.options;
const addStoryByInput      = document.querySelector(".add_story_by");
const addStoryByButton     = document.querySelector(".add_story_button");

addStoryByButton.addEventListener("click", function(e) {
  addStory();
  e.preventDefault();
});

function addStory() {
  let addStoryByInputText = addStoryByInput.value.trim();
  let isNameAvailable     = true;
  
  if (addStoryByInputText) {
    // 遍历所有选项，不再跳过最后一个
    for (let i = 0; i < selectStoryByOptions.length; i++) {
      // 同时trim选项文本，避免空格导致的误判
      if (selectStoryByOptions[i].text.trim() === addStoryByInputText) {
        isNameAvailable = false;
        break;
      }
    }
    
    if (isNameAvailable) {
      let newOption = document.createElement("option");
      newOption.value = selectStoryByOptions.length;
      newOption.text  = addStoryByInputText;
      selectStoryByOptions.add(newOption);
      addStoryByInput.value = ""; // 清空输入框，提升操作体验
    }
  }
}

更简洁的ES6优化版本 #

利用数组方法简化重复检测逻辑，代码可读性更高：

const selectStoryBy        = document.querySelector("select#story_by");
const addStoryByInput      = document.querySelector(".add_story_by");
const addStoryByButton     = document.querySelector(".add_story_button");

addStoryByButton.addEventListener("click", function(e) {
  e.preventDefault();
  const inputText = addStoryByInput.value.trim();
  if (!inputText) return;

  // 将options集合转为数组，用some方法快速检测重复
  const hasDuplicate = Array.from(selectStoryBy.options).some(option => 
    option.text.trim() === inputText
  );

  if (!hasDuplicate) {
    const newOption = new Option(inputText, selectStoryBy.options.length);
    selectStoryBy.add(newOption);
    addStoryByInput.value = "";
  }
});

关键修改点说明 #

1. 移除循环条件中的-1，确保遍历所有已存在的选项
2. 给输入文本和选项文本都加上trim()，避免前后空格导致的重复误判
3. 添加清空输入框的逻辑，优化用户操作流程

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