如何通过下拉菜单切换基于data属性对div元素进行排序

嘿，这个需求很常见，用原生JavaScript就能轻松实现，我给你一步步拆解方案~

1. 先完善HTML结构 #

首先建议给下拉菜单和结果div的父容器加上ID，这样后续获取元素更方便，也能避免影响页面上的其他元素：

<select id="sortSelect">
  <option value="0">Sort by</option>
  <option value="1">Low price to high</option>
  <option value="2">High price to low</option>
</select>

<!-- 给所有结果div套一个父容器，排序后统一更新DOM更高效 -->
<div id="resultsContainer">
  <div data-price="15000" data-pet="1" data-balcony="0">Apartment A</div>
  <div data-price="22000" data-pet="0" data-balcony="1">Apartment B</div>
  <div data-price="12000" data-pet="1" data-balcony="0">Apartment C</div>
</div>

2. 核心JavaScript排序逻辑 #

接下来写排序的核心代码，思路很清晰：监听下拉菜单的选择变化，根据选中的规则对div数组排序，最后重新渲染到页面上：

// 获取页面元素
const sortSelect = document.getElementById('sortSelect');
const resultsContainer = document.getElementById('resultsContainer');

// 页面加载时先保存初始的div顺序，方便后续重置
const originalDivOrder = Array.from(resultsContainer.querySelectorAll('div'));

// 监听下拉菜单的选择事件
sortSelect.addEventListener('change', function() {
  const selectedOption = this.value;
  // 把结果div转成数组（NodeList不能直接用sort方法）
  const divsToSort = Array.from(resultsContainer.querySelectorAll('div'));

  // 根据选中的选项执行不同排序逻辑
  switch(selectedOption) {
    case '1': // 价格升序
      divsToSort.sort((a, b) => {
        // 一定要把data属性转成数字，不然会按字符串排序出问题
        const priceA = parseInt(a.dataset.price);
        const priceB = parseInt(b.dataset.price);
        return priceA - priceB;
      });
      break;
    case '2': // 价格降序
      divsToSort.sort((a, b) => {
        const priceA = parseInt(a.dataset.price);
        const priceB = parseInt(b.dataset.price);
        return priceB - priceA;
      });
      break;
    default: // 回到初始排序
      divsToSort.splice(0, divsToSort.length, ...originalDivOrder);
      break;
  }

  // 清空容器，插入排序后的div（用文档片段减少DOM操作次数，提升性能）
  const fragment = document.createDocumentFragment();
  divsToSort.forEach(div => fragment.appendChild(div));
  resultsContainer.innerHTML = '';
  resultsContainer.appendChild(fragment);
});

3. 扩展与优化小技巧 #

• 支持更多排序规则：如果之后需要按data-pet或data-balcony排序，只需要在switch里新增case即可，比如：

  case '3': // 允许养宠物的优先
    divsToSort.sort((a, b) => {
      const petA = parseInt(a.dataset.pet);
      const petB = parseInt(b.dataset.pet);
      return petB - petA; // 1（允许）在前，0（不允许）在后
    });
    break;
  

• 性能优化：用DocumentFragment来批量插入DOM元素，比一个个appendChild少触发多次重排，在div数量多的时候效果更明显。
• 容错处理：如果data属性可能为空或非数字，可以加个默认值，比如parseInt(a.dataset.price) || 0，避免排序出错。

内容的提问来源于stack exchange，提问作者Savaş Zorlu