将所选元素移动到最后

Question

我们有HTML代码

<select id="mySelect">
 <optgroup label="First group" id="firstGrp">
   <option value="One">One</option>
   <option value="Two">Two</option>
</optgroup>
 <optgroup label="Second group" id="secondGrp">
   <option value="Three">Three</option>
   <option value="Six">Six</option>
   <option value="Four">Four</option>
   <option value="Five">Five</option>
 </optgroup>
</select>

我想将<option value="Six">Six</option>到<optgroup label="Second group" id="secondGrp"> 。

所以，我选择必要的元素并将其删除。

var secondGrp = d3.selectAll("#secondGrp option");
var six = secondGrp.filter(function(d, i){ return d === "Six")})
six.remove();

不幸的是，我不知道如何在<option value="Six">Six</option>的末尾添加它。

Answer 1

我迟到了这个派对，但是我想在这个对话中添加D3 4.0中引入的新的lower()和raise()函数。 它非常简单：

selection.raise（）按顺序重新插入每个选定元素作为其父元素的最后一个子元素。

和：

selection.lower（）按顺序重新插入每个选定元素作为其父元素的第一个子元素。

所以，你需要做的就是：

d3.select("[value='Six']").raise();

检查这个小提琴，你可以点击按钮，看看它上下： https ： //jsfiddle.net/gerardofurtado/omk8r7dh/

这里的名字有点令人困惑，因为“加注”会使“六”在列表中下降，“下限”会使它上升。

Answer 2

作为echonax 答案的替代方案，您只需重新附加已删除的DOM元素，而无需创建和追加新元素。 如果此元素有许多属性，这会派上用场。

d3.select("#secondGrp").append(function() {
  return d3.select("option[value=Six]").remove().node();
});

 d3.select("#secondGrp").append(function() { return d3.select("option[value=Six]").remove().node(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <select id="mySelect"> <optgroup label="First group" id="firstGrp"> <option value="One">One</option> <option value="Two">Two</option> </optgroup> <optgroup label="Second group" id="secondGrp"> <option value="Three">Three</option> <option value="Six">Six</option> <option value="Four">Four</option> <option value="Five">Five</option> </optgroup> </select> 

这利用了一个事实，即selection.remove()将返回被删除的元素的选择。 这是它的用例：

但是，您可以将函数传递给selection.append或selection.insert以重新添加元素。

Answer 3

结果如下： https ： //jsfiddle.net/bL6aavxr/1/

您可以使用属性选择器删除这样的值，不需要过滤器：

d3.select("[value='Six']").remove();

那么你可以用你喜欢的任何属性和文字“追加”你想要的选项：

d3.select("#secondGrp").append('option').attr("value", "Six").html("Six");