下拉框与搜索列表重复选择时添加选中提示功能需求

没问题，这两个校验需求其实都不难，分两部分来实现就好，我给你写了具体的代码示例，直接套用或者改改就能用：

一、Sub-location下拉框重复选择提示 #

核心思路是监听两个下拉框的change事件，每次值变动后对比选中值，相同就给出提示（这里用页面内的提示元素比alert更友好，当然你也可以换成弹窗）。

HTML结构示例 #

<div class="location-group">
  <label>From Sub-location:</label>
  <select id="from-subloc">
    <option value="">请选择源位置</option>
    <option value="s1">试剂库A区</option>
    <option value="s2">试剂库B区</option>
    <option value="s3">临时存储区</option>
  </select>

  <label>To Sub-location:</label>
  <select id="to-subloc">
    <option value="">请选择目标位置</option>
    <option value="s1">试剂库A区</option>
    <option value="s2">试剂库B区</option>
    <option value="s3">临时存储区</option>
  </select>

  <!-- 页面内提示元素，默认隐藏 -->
  <p id="loc-error" style="color: red; display: none; margin-top: 8px;"></p>
</div>

JavaScript实现 #

// 获取DOM元素
const fromLoc = document.getElementById('from-subloc');
const toLoc = document.getElementById('to-subloc');
const locError = document.getElementById('loc-error');

// 定义校验函数
function checkDuplicateLocation() {
  const fromVal = fromLoc.value;
  const toVal = toLoc.value;

  if (fromVal && toVal && fromVal === toVal) {
    // 显示提示，顺便把选中的文本也展示出来
    locError.textContent = `「${fromLoc.options[fromLoc.selectedIndex].text}」已被选为源位置，请更换目标位置`;
    locError.style.display = 'block';
    // 可选：自动清空目标位置的选择
    // toLoc.value = '';
  } else {
    // 没有重复就隐藏提示
    locError.style.display = 'none';
  }
}

// 给两个下拉框绑定事件
fromLoc.addEventListener('change', checkDuplicateLocation);
toLoc.addEventListener('change', checkDuplicateLocation);

二、Bloodhound搜索列表的试剂重复选择提示 #

这里需要维护一个集合来记录已选中的试剂（用Set比数组更高效判断是否存在），然后在用户选中搜索结果时做校验。

假设你的Bloodhound和Typeahead已经初始化，在选中事件里加校验 #

// 存储已选中试剂的唯一ID（用Set避免重复）
const selectedMedIds = new Set();

// 初始化Bloodhound数据源（这里是示例，你可以替换成自己的数据源）
const medicineSource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: '/your-api/medicines?query=%QUERY',
    wildcard: '%QUERY'
  }
});

// 绑定到搜索框
$('#medicineSearchBar').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'medicines',
  display: 'name',
  source: medicineSource,
  templates: {
    suggestion: (data) => `<div>${data.name} (编号: ${data.id})</div>`
  }
}).on('typeahead:selected', function(e, selectedDatum) {
  // 校验是否已选中
  if (selectedMedIds.has(selectedDatum.id)) {
    alert(`试剂「${selectedDatum.name}」已经被选中啦，别重复选哦～`);
    // 可选：清空搜索框的内容
    $(this).typeahead('val', '');
  } else {
    // 加入已选集合
    selectedMedIds.add(selectedDatum.id);
    // 这里可以添加把试剂加入已选列表的逻辑，比如：
    // $('#selected-meds-list').append(`<li>${selectedDatum.name}</li>`);
    console.log('新增选中试剂:', selectedDatum);
  }
});

如果你的搜索列表是自定义的（不是Typeahead默认的下拉），那就在点击搜索结果的事件里做同样的判断：先检查selectedMedIds里有没有当前试剂的ID，有就提示，没有就添加。

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