如何隐藏自定义选择列表中已选中的选项？

嘿，这个需求很合理，我来帮你搞定！核心思路就是每次展开下拉列表时，自动隐藏当前已经选中的选项，关闭时不用特意恢复（因为下次展开会重新判断），如果需要支持取消选中的话，再做额外处理就行。下面结合你的代码结构给出具体修改方案：

关键修改逻辑 #

1. 展开下拉列表时，先获取当前已选中的选项文本/值
2. 遍历所有下拉选项，匹配已选中项的就隐藏，其余正常显示
3. 选中新选项后，更新选中状态并收起下拉

修改后的完整代码示例 #

假设你的自定义选择框基础结构是这样的（如果你的结构不同，只需调整选择器即可）：

<div class="selectBox">
  <span class="selectedValue">请选择</span>
  <ul class="selectOptions">
    <li>car</li>
    <li>bike</li>
    <li>bus</li>
  </ul>
</div>

对应的JS代码修改如下：

$(document).ready(function() { 
  enableSelectBoxes(); 
}); 

function enableSelectBoxes() { 
  $('div.selectBox').each(function() { 
    const $selectBox = $(this);
    const $selectedDisplay = $selectBox.find('.selectedValue'); // 显示选中值的元素
    const $optionsList = $selectBox.find('ul.selectOptions');
    const $options = $optionsList.find('li');

    // 点击选择框展开/收起下拉
    $selectBox.on('click', function(e) {
      e.stopPropagation();
      const isDropdownOpen = $optionsList.is(':visible');

      if (isDropdownOpen) {
        $optionsList.hide();
      } else {
        // 展开时隐藏已选中的选项
        const currentSelectedText = $selectedDisplay.text().trim();
        $options.each(function() {
          const optionText = $(this).text().trim();
          // 匹配已选中项则隐藏，否则显示
          $(this).toggle(optionText !== currentSelectedText);
        });
        $optionsList.show();
      }
    });

    // 点击选项完成选择
    $options.on('click', function() {
      const selectedText = $(this).text().trim();
      $selectedDisplay.text(selectedText);
      $optionsList.hide();
      // 如果你的选项有value属性，建议用value存储更可靠：
      // const selectedValue = $(this).data('value');
      // $selectBox.data('selected-value', selectedValue);
    });

    // 点击页面其他区域收起下拉
    $(document).on('click', () => $optionsList.hide());
  }); 
}

额外提示 #

• 如果你的选项是通过data-value而非文本区分的，记得把文本比较改成value对比（比如用$selectBox.data('selected-value')和$(this).data('value')判断），避免文本重复导致的错误。
• 如果需要支持取消选中（比如用户想清空选择），可以在下拉列表里添加一个“清空选择”的选项，或者不要完全隐藏已选中项，而是给它添加禁用样式（比如变灰+不可点击），同时允许点击它来取消选中状态。

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