如何用jQuery实现下拉框选中项隐藏、切换选中时恢复显示？

嘿，这个需求我之前也碰到过，用jQuery实现起来其实挺简单的，我给你一步步拆解下～

首先先补全你给出的下拉列表HTML（原来的代码有点不完整）：

<dl id='assettypes' class="dropdown">
  <dt>
    <a href="#">
      <span> Select option </span>
    </a>
  </dt>
  <dd>
    <ul id="ggg">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
    </ul>
  </dd>
</dl>

接下来是核心的jQuery代码，完全贴合你的需求：

// 存储被移除的列表项和它原来的位置索引
let removedLi = null;
let removedIndex = 0;

// 给下拉列表里的所有选项绑定点击事件
$('#ggg li a').on('click', function(e) {
  // 阻止<a>标签的默认跳转行为
  e.preventDefault();
  
  // 获取当前点击的<li>元素，以及它在列表中的位置
  const currentLi = $(this).parent();
  const currentIndex = $('#ggg li').index(currentLi);

  // 如果之前已经移除过某个选项，先把它恢复回列表的原位置
  if (removedLi) {
    const targetLi = $('#ggg li').eq(removedIndex);
    if (targetLi.length) {
      // 原位置还有元素，就插在它前面
      targetLi.before(removedLi);
    } else {
      // 原位置已经没有元素（比如之前移除的是最后一项），就追加到末尾
      $('#ggg').append(removedLi);
    }
    // 清空存储的移除项和索引
    removedLi = null;
  }

  // 存储当前选中项的位置和元素，然后从列表中移除它
  removedIndex = currentIndex;
  removedLi = currentLi.detach(); // 用detach()保留元素的事件和数据，方便后续恢复

  // 可选：更新下拉按钮的显示文本，让用户直观看到选中的选项
  $('#assettypes dt span').text($(this).text());
});

代码逻辑解释： #

• 变量存储：用removedLi保存被移除的
• 元素，removedIndex记录它原来在列表中的位置，这样恢复时能回到原位，体验更好。
• 点击事件处理：
  1. 先阻止标签的默认跳转，避免页面刷新。
  2. 检查是否有之前移除的选项，如果有就把它插回原位置（或末尾），然后清空存储变量。
  3. 把当前选中的
  4. 用detach()移除（区别于remove()，detach会保留元素的事件和DOM数据，恢复时不用重新绑定事件），并存储它的位置和元素。
• 可选优化：更新下拉按钮的显示文本，让交互更清晰。