我有一个未知的选择框，因为我用来让用户能够对表中保存的行进行排序。在此示例中，我让用户对他最喜欢的颜色进行排序:
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 位)并将其更改为第 1 位。 - 然后 javascript 应该找到第一个位置并将其更改为第二个位置(因为绿色之前是 2)
所以在某种程度上它会切换用户选择的号码。这可以通过简单的方式实现吗？
我尝试在谷歌(和stackoverflow)上搜索，但没有找到任何东西。我不喜欢你编程，但我不知道从哪里开始。
最佳答案
你很接近了!你所说的是 DOM 操作，本质上就是 javascript 的构建目的。
首先，您没有在元素上设置任何 id，为了通过 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 元素作为上述许多函数中的“子元素”。这意味着您需要识别用户选择的元素并据此重新排序。按顺序将值设置为数组可能会更容易 ['Orange', 'Green', 'Blue'] ，并执行逻辑以在更改时对数组重新排序，然后根据数组的状态重新渲染。
从概念上讲，这听起来很复杂，但实际上比您想象的要容易。祝你好运:)
关于javascript - 让用户使用选择框进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44662094/