Javascript 如何使用下拉菜单和HTML5数据属性动态更改HTML元素的分组？

鉴于此下拉列表：

<select>
  <option value="group1">Name</option>
  <option value="group2" data-group-order="[Odds|Evens]">Odds First then Even</option>
  <option value="group3" data-group-order="[Most Favorites|Somewhat Favorites|Least Favorites]">Most to least favorite</option>
</select>

这个HTML：

<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>

当从下拉列表中选择选项时，我可以动态更新HTML，以便用户看到的是基于option elements数据组顺序值的div分组，该组中的每个div都按照其数据组x order属性的值排序

例如，如果我选择名称选项value=group1，我希望：

<div>Name</div>
<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>

<div>Odds</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>
<div>Evens</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>

<div>Most Favorites</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div>Somewhat Favorites</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>
<div>Least Favorites</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>

如果我先选择赔率，然后选择偶数选项值=group1，数据组顺序=[赔率| Evens]，我希望：

<div>Name</div>
<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>

<div>Odds</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>
<div>Evens</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>

<div>Most Favorites</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div>Somewhat Favorites</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>
<div>Least Favorites</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>

如果我选择最不喜欢的选项值=组3数据组顺序=[最喜欢的|有点喜欢的|最不喜欢的]我会期望：

<div>Name</div>
<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>

<div>Odds</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>
<div>Evens</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>

<div>Most Favorites</div>
<div id="Item9" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="1">Item 9</div>
<div id="Item4" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="5">Item 4</div>
<div id="Item6" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Most Favorites" data-group3-order="10">Item 6</div>
<div>Somewhat Favorites</div>
<div id="Item7" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="2" data-group3-name="Somewhat Favorites" data-group3-order="2">Item 7</div>
<div id="Item10" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div>
<div>Least Favorites</div>
<div id="Item2" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="1">Item 2</div>
<div id="Item3" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="4" data-group3-name="Least Favorites" data-group3-order="1">Item 3</div>
<div id="Item8" data-group1-name="Name" data-group1-order="1" data-group2-name="Evens" data-group2-order="1" data-group3-name="Least Favorites" data-group3-order="3">Item 8</div>
<div id="Item5" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="3" data-group3-name="Least Favorites" data-group3-order="5">Item 5</div>
<div id="Item1" data-group1-name="Name" data-group1-order="1" data-group2-name="Odds" data-group2-order="5" data-group3-name="Least Favorites" data-group3-order="10">Item 1</div>

---

请注意，当使用数据组X顺序在分组内排序时，顺序基于该值，如果多个元素共享相同的值，则以字母数字为基础。

一种可能的方法。请注意，我避免同时使用order。我基于data-group2-name进行排序，但有一个dict变量，它跟踪我希望这些不同名称值出现的顺序。这样做的原因是，必须手动维护订单值，这极有可能导致忘记更新一个项目

对于具有相同值的元素，按字母顺序编号的方法是先按名称排序，然后应用组顺序。注意，按字母顺序，“项目10”位于“项目2”之前

函数handleSelectChangeevent{ var selectEl=event.target； var gp=selectEl.value； var dict=selectEl.options[selectEl.selectedIndex].dataset.groupOrder； dict=dict | |.replace/\[.*.\]/，$1.拆分“|”； 群体儿童 document.getElementById'orderedThroughSelect'， gp， 字典 ; } 函数组childrenel，gp，dict{ //-获取要排序的节点列表 var节点=Array.prototype.slice.callel.children； //-订购 //从按字母顺序排列选项开始 var nodeText=functionnode{return node.innerText；}； var ALPHALOCASC=function，b{返回ab？1:0；}； nodes.sortfunctiona，b{返回nodetexta，nodeTextb；}； //现在分组订购 ifdict{ var nodeGroupIndex=functionnode{return dict.indexOfnode.dataset[gp+'Name']；}； var numericAsc=functiona，b{返回a-b；}； nodes.sortfunctiona，b{返回numericsNodeGroupIndexa，nodeGroupIndexb；}； } //-重置内容 var div=document.createElement'div'； nodes.forEachfunctionel{div.appendChildel；}； el.innerHTML=div.innerHTML； } 名称 赔率先升后降 最不受欢迎 项目1 项目2 项目3 项目4 项目5 项目6 项目7 项目8 项目9 项目10