Question

我有一个未知的选择框，因为我用它来让用户能够对表中保存的行进行排序。在这个例子中，我让用户对他喜欢的颜色进行排序：

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元素作为“孩子”。这意味着您需要识别用户已选择的元素并根据该元素重新排序。按顺序['Orange', 'Green', 'Blue']将值设置为数组可能更容易，并执行逻辑以在更改时对数组重新排序，然后根据数组的状态重新呈现。

从概念上讲，这听起来很复杂，但实际上比你想象的要容易。祝你好运：）

让用户使用选择框进行排序

1 个答案: