基于下拉列表选中值实现DOM节点的Detach与Append操作

页面加载时，#all 元素显示，其余带 .hideOnPageLoad 类的元素隐藏；下拉列表选中选项时，隐藏所有元素并仅显示选中项。但隐藏元素仍留存于DOM中，导致节点数量过多。尝试用jQuery的.detach()和.append()实现相同功能，但未达到预期效果。现有代码如下：

现有JS代码 #

$(document).ready(function () {
  $('.hideOnPageLoad').hide();
  $('#all').show();
  $('#DestinationSelect').change(function () {
    $('.hideOnPageLoad').hide();
    $selectedValue = $(this).val();
    $('#' + $selectedValue).toggle();
  });
})(jQuery);

现有HTML代码 #

<select name="DestinationSelect" id="DestinationSelect">
  <option value="" disabled selected>Choose a destination</option>
  <option value="all">View all destinations</option>
  <option value="belgium">Belgium</option>
  <option value="canada">Canada</option>
  <option value="croatia">Croatia</option>
  <option value="france">France</option>
  <option value="greece">Greece</option>
  <option value="iceland">Iceland</option>
  <option value="india">India</option>
  <option value="netherlands">The Netherlands</option>
  <option value="norway">Norway</option>
  <option value="spain">Spain</option>
  <option value="switzerland">Switzerland</option>
  <option value="azores">The Azores</option>
  <option value="ski">Winter Skiing</option>
</select>

核心思路是把暂时不显示的元素从DOM中移除，存储在内存对象中，需要时再插入DOM，避免无用节点堆积。

修改后的JS代码：

$(document).ready(function () {
  // 存储所有需要切换的元素，key为元素ID
  const cachedElements = {};
  // 获取所有目标元素的父容器（需根据实际DOM结构调整选择器）
  const $container = $('#all').parent();

  // 初始化：把除#all外的元素detach并缓存
  $('.hideOnPageLoad').not('#all').each(function() {
    const $el = $(this);
    cachedElements[$el.attr('id')] = $el.detach();
  });

  // 下拉框切换事件
  $('#DestinationSelect').change(function () {
    const selectedValue = $(this).val();
    // 移除当前DOM中所有目标元素
    $('.hideOnPageLoad').detach();

    if (selectedValue === 'all') {
      // 显示全部：把#all和缓存的所有元素插回容器
      $container.append($('#all'));
      Object.values(cachedElements).forEach($el => {
        $container.append($el);
      });
    } else {
      // 显示选中项：从缓存取对应元素或直接获取#all，插回容器
      const $targetEl = cachedElements[selectedValue] || $('#' + selectedValue);
      $container.append($targetEl);
    }
  });
})(jQuery);

注意事项 #

1. 所有.hideOnPageLoad元素必须有唯一ID，且与下拉选项的value完全匹配。
2. 需确保父容器选择器正确（示例中用$('#all').parent()，实际结构不同需调整）。
3. 初始化时仅保留#all在DOM中，其他元素存入内存缓存；切换时先清空当前目标元素，再插入需要显示的内容。

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