JavaScriptで複数選択リストの移動

Question

JavaScript でリストから複数選択したものを上下ボタンで移動するコードを書きたいです。
ただ上下移動するものは書くことができましたが複数移動にするとうまく動作しません。
複数選択したものを上下に移動させる方法を教えてください。

実装したいもの
2と3を選択して下ボタンを押下
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
↓
<option value="1">1</option>
<option value="4">4</option>
<option value="2">2</option>
<option value="3">3</option>

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];

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

Comments

[itagagaki]

まず提示のコードには未定義の変数の参照となっているものが複数あります。
まずは確認してからコードを貼ってください。

[hunata_konbi]

ご指摘ありがとうございます。
修正しました。

[itagagaki]

まだ文法的な間違いが散見され、曲がりなりにも動いていたコードを切り出したものとは思えません…。

[hunata_konbi]

見よう見まねで書いてしまったものなので文法の勉強をして修正します。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const opt=document.querySelectorAll('#item-list option');
  up.addEventListener('click',()=>{
    [...opt].filter(x=>x.selected).forEach(x=>{
      const prev=x.previousElementSibling;
      if(prev && !prev.selected) x.parentNode.insertBefore(x,prev);
    });
  });
  down.addEventListener('click',()=>{
    [...opt].filter(x=>x.selected).reverse().forEach(x=>{
      const next=x.nextElementSibling;
      if(next && !next.selected) x.parentNode.insertBefore(next,x);
    });
  });
});

</script>
<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>
<hr>
<input type="button" value="↑" id="up">
<input type="button" value="↓" id="down">

Comments

[hunata_konbi]

ありがとうございます。

Answer 2

コメントで述べられた挙動ですと、以下のような手順で:

• 上に動かす場合、s.optionsを昇順にループ
  • s.optoins[i] が選択済みであった場合
    • iが0なら終了、そうでないならs.options[i]と s.options[i - 1] をs.insertBefore()で入れ替える
• 下に動かす場合、s.optionsを降順にループ
  • s.options[i] が選択済みであった場合
    • i が s.options.length - 1 なら終了、そうでないなら s.options[i]と s.options[i + 1] をs.insertBefore() で入れ替える

---

以下は期待する動作と違うボツ案です。

複数選択の場合にどういう挙動が欲しいのかちょっとピンとこないのですが(1と3が選択されている場合は?)、選択されたoptionを上か下に集めるという挙動なら、以下のような手順でどうでしょうか。

1. s.options を配列化する let opts = [...s.options];
2. 上に集める場合、その配列を走査して未選択optionを順にs.appendChild()する。
3. 下に集める場合、その配列を走査して選択済みのoptionを順にs.appendChild()する。

Comments

[hunata_konbi]

ご回答ありがとうございます。
1と3が選択されている場合に上ボタンを押したら1より上はないので動かない想定です。
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>

その配列を走査というのはif文で回すイメージでしょうか。
初めてコードを書くので初歩的な質問で申し訳ございません。

[int32_t]

最初の回答は期待する動作ではないようなので、回答を更新しました。

> その配列を走査というのは

for などで全要素を処理しろということです。

[hunata_konbi]

ご回答ありがとうござます。
明日試してみます。

また質問に対してもお答えくださりありがとうございます。

[hunata_konbi]

できました。
ありがとうございました。