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

Question

鉴于此下拉列表：

<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，以便用户看到的是基于选项元素“ data-group-order”值的div分组，该组中的每个div都进行了排序通过其“ data-groupX-order”属性的值？

例如，如果我选择了“名称”选项（值= 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>

如果我选择“先赔率然后再赔率”选项（值= group1，数据组顺序=“ [赔率|偶数]”），则我期望：

<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>

如果我选择“最不喜欢的东西”选项（value = group3 data-group-order =“ [最喜欢的东西|最喜欢的东西|最不喜欢的东西]”，我会期望：

<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>

请注意 ，在使用“ data-groupX-order”进行分组内的排序时，该顺序基于该值，然后在多个元素共享相同值的情况下，按字母数字顺序。

Answer 1

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

具有相同值的元素按字母顺序编号是通过首先按名称排序然后应用组顺序来完成的（请注意，按字母顺序，“第10项”位于“第2项”之前）。

 function handleSelectChange(event) { var selectEl = event.target; var gp = selectEl.value; var dict = selectEl.options[selectEl.selectedIndex].dataset.groupOrder; dict = (dict || '').replace(/\\[(.*?)\\]/, "$1").split('|'); groupChildren( document.getElementById('orderedThroughSelect'), gp, dict ); } function groupChildren(el, gp, dict) { // --- getting the list of nodes to sort var nodes = Array.prototype.slice.call(el.children); // --- ordering // start by ordering options in alphabetical order var nodeText = function(node) { return node.innerText; }; var alphabeticAsc = function(a, b) { return (a < b) ? -1 : (a > b) ? 1 : 0; }; nodes.sort(function(a, b) { return alphabeticAsc(nodeText(a), nodeText(b)); }); // now order by group if(dict) { var nodeGroupIndex = function(node) { return dict.indexOf(node.dataset[gp+'Name']); }; var numericAsc = function(a, b) { return a - b; }; nodes.sort(function(a, b) { return numericAsc(nodeGroupIndex(a), nodeGroupIndex(b)); }); } // --- reseting content var div = document.createElement('div'); nodes.forEach(function(el) { div.appendChild(el); }); el.innerHTML = div.innerHTML; } 

 <select onchange='handleSelectChange(event)'> <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> <div id='orderedThroughSelect'> <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="2" 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="3" 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="4" 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="5" 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="6" 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="7" 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="8" 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="9" 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="10" data-group2-name="Evens" data-group2-order="1" data-group3-name="Somewhat Favorites" data-group3-order="5">Item 10</div> </div>