使用JavaScript移动多选列表

Question

我是第一次编程。我想写一段代码，用JavaScript中的向上和向下按钮从列表中移动多个选择。然而，我可以写一些上下移动的东西，但如果我多次移动，效果就不好了。请告诉我如何上下移动多个选定项目。

如果选择3和5并按下向上按钮，则需要执行以下操作。

<option value = "1"> 1 </ option>
<option value = "2"> 2 </ option>
<option value = "3"> 3 </ option>
<option value = "4"> 4 </ option>
<option value = "5"> 5 </ option>
<option value = "6"> 6 </ option>
↓
<option value = "1"> 1 </ option>
<option value = "3"> 3 </ option>
<option value = "2"> 2 </ option>
<option value = "5"> 5 </ option>
<option value = "4"> 4 </ option>
<option value = "6"> 6 </ option>

<table>
<tr>
<td>
<select id="item-list" size="8" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<input type="button" value="↑" onclick="move('up');">
<br/>
<input type="button" value="↓" onclick="move('down');">
</td>
</tr>
</table>

function move(act)
{
var s = document.getElementById("item-list");
if (s.selectedIndex == -1) return;
var opt = s.options[s.selectedIndex];

if (act == 'up')
{
if (s.options[s.selectedIndex - 1])
{
s.insertBefore(opt, s.options[s.selectedIndex - 1]);
}
}
if (act == 'down')
{
if (s.options[s.selectedIndex + 1])
{
s.insertBefore(opt, s.options[s.selectedIndex + 1].nextSibling);
}
}
}

Answer 1

您的代码有几个小错误。我搞定了。

function move(act) {  
var s = document.getElementById("item-list");

if(s.selectedIndex == -1) return;

var opt = s.options[s.selectedIndex];
var opts = s.options;

for (let i = 0; i < opts.length; i++) {
if (opts[i].selected){
console.log(opts[i].value);
if (act == 'up') {
if (s.options[s.selectedIndex-1]) {
s.insertBefore(opt, s.options[s.selectedIndex-1]);
}
}

if (act == 'down') {
if (s.options[s.selectedIndex+1]) {
s.insertBefore(opt, s.options[s.selectedIndex+1].nextSibling);
}
}
}   
}
}

<table>
<tr>
<td>
<select id="item-list" size="8" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<input type="button" value="↑" onclick="move('up');">
<br/>
<input type="button" value="↓" onclick="move('down');">
</td>
</tr>
</table>