讓用戶使用選擇框排序

Question

我有一個未知的選擇框，用於讓用戶能夠對保存在表中的行進行排序。在這個例子中，我讓用戶排序自己最喜歡的顏色：

https://jsfiddle.net/rutnceL7/2/

Orange 
<select name="nr[]" onchange="sortselect(this.id);"> 
<option value="1" selected>1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select><br>Green 
<select name="nr[]" onchange="sortselect(this.id);"> 
<option value="1">1</option> 
<option value="2" selected>2</option> 
<option value="3">3</option> 
</select><br>Blue 
<select name="nr[]" onchange="sortselect(this.id);"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3" selected>3</option> 
</select><br> 

是否可以使用純JavaScript（或jQuery的，但我更喜歡的JavaScript）來實現這一目標： - 用戶需要綠色（2.地點）並將其更改爲第一名。 - 然後JavaScript應該找到第一個地方，並將其更改爲第二位（因爲綠色是2.之前）

因此，它以某種方式切換用戶選擇的號碼。這可能以簡單的方式嗎？

我試圖搜索谷歌（和stackoverflow），但沒有發現任何東西。我不喜歡你做編程，但我不知道從哪裏開始。

Answer 1

您靠近！你在談論的是DOM操作，它基本上是爲JavaScript構建的。

首先，你沒有設置你的元素的任何id，爲了查詢id你必須有這些。這與設置一樣簡單<select id='foo'>

每個選擇ID都應該是唯一的，以便您可以在腳本中引用。

接下來，您需要修改您已設置的DOM onchange，但您並未執行實際修改。您需要添加和刪除DOM中的元素。您可以使用element.appendChild(child)，其中'element'是要附加到的目標，'child'是要添加的元素。您應仔細閱讀MDN參考信息以獲得更好的理解（https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild）。 .removeChild()和.replaceChild()以類似的方式工作，可能會對您感興趣。

一個告誡，你需要在上面的許多函數中使用實際的html元素作爲'child'。這意味着您需要識別用戶已選擇的元素並基於此重新排序。按照['Orange', 'Green', 'Blue']的順序將值設置爲數組可能更容易，並執行邏輯以便在更改時對陣列重新排序，然後根據數組的狀態重新渲染。

從概念上講，這聽起來很複雜，但實際上比您想象的要容易。祝你好運:)