如何使用select对div进行排序？就像在购物方面一样，性别和鞋码

<select id="sortSelect">
  <option value="gender">按性别排序</option>
  <option value="shoesize">按鞋码排序</option>
</select>

<div data-gender="male" data-shoesize="42">男性，鞋码42</div>
<div data-gender="female" data-shoesize="38">女性，鞋码38</div>
<div data-gender="male" data-shoesize="40">男性，鞋码40</div>
<div data-gender="female" data-shoesize="36">女性，鞋码36</div>

const divs = Array.from(document.querySelectorAll('div'));
const sortSelect = document.getElementById('sortSelect');

sortSelect.addEventListener('change', () => {
  const sortBy = sortSelect.value;
  sortDivs(sortBy);
});

function sortDivs(sortBy) {
  divs.sort((a, b) => {
    const aValue = a.getAttribute(`data-${sortBy}`);
    const bValue = b.getAttribute(`data-${sortBy}`);
    return aValue.localeCompare(bValue);
  });

  divs.forEach(div => div.remove());
  divs.forEach(div => document.body.appendChild(div));
}