如何用jQuery防止下拉菜单（dropdown）添加重复选项？

核心思路 #

在将输入框内容添加到下拉菜单前，先检查下拉菜单中是否已存在相同选项。仅当选项不存在时，才执行添加操作；若已存在，则跳过添加（也可添加提示逻辑）。

代码示例 #

HTML 结构 #

<input type="text" id="inputBox" placeholder="输入内容">
<button id="addBtn">添加到下拉</button>
<select id="dropdown">
  <option value="选项1">选项1</option>
</select>

JavaScript 逻辑 #

const inputBox = document.getElementById('inputBox');
const addBtn = document.getElementById('addBtn');
const dropdown = document.getElementById('dropdown');

addBtn.addEventListener('click', function() {
  const inputValue = inputBox.value.trim();
  // 空值直接返回，不处理
  if (!inputValue) return;

  // 遍历现有选项，检查是否重复
  let isDuplicate = false;
  for (let i = 0; i < dropdown.options.length; i++) {
    if (dropdown.options[i].text === inputValue) {
      isDuplicate = true;
      break;
    }
  }

  if (!isDuplicate) {
    // 创建并添加新选项
    const newOption = document.createElement('option');
    newOption.value = inputValue;
    newOption.text = inputValue;
    dropdown.add(newOption);
    // 清空输入框
    inputBox.value = '';
  } else {
    // 可选：提示用户选项已存在
    alert('该选项已存在，无需重复添加');
  }
});

额外调整方案 #

• 如果需要不区分大小写的去重，可以将对比内容统一转成小写（或大写）：

  if (dropdown.options[i].text.toLowerCase() === inputValue.toLowerCase()) {
    isDuplicate = true;
    break;
  }
  

• 也可以根据选项的value属性判断重复，只需把text替换成value即可，按需选择。

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