將所選元素移動到最后

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");