option要素を追加したい

Question

●実現したいこと
下の図でAで選択したもの(複数選択)をBの項目に追加したいです。その際に、Aで選択して追加を押した際は、Aから消えてBに追加させたいです。

●現時点でできていること・うまくいっていないこと
追加を押した際に、メンバーの追加は、できるが、複数人選択して追加を押すと
上の人のみが追加されている現状です。AさんとCせんなら、Aさんのみ追加されています。

html部分

//Bの部分
<select name="addressId" size="9" multiple="multiple" id="addressList" class="pickList">
</select>

//Aの部分
<select size="7" name="choiceList" multiple="multiple" id="addressChoiceList">
  <option value="27648518">Aさん ([e-mail])</option>
  <option value="27648519">Bさん ([e-mail])</option>
  <option value="27648520">Cさん ([e-mail])</option>
  <option value="27648521">Dさん ([e-mail])</option>
</select>

//追加のリンク
<p>
<a href="javascript:void(0);" class="button--choice__operation choiceAdd" title="追加" onclick="member_add_btn();">
<span>追加</span>
</a>
</p>

javaScript部分

//追加を押した時の処理
function member_add_btn(){
  // 追加したい親要素を取得
  var addressList = document.getElementById('addressList');
  //選択する候補
  var member = document.chat_theme.choiceList;
  //選択したものを配列に追加する
  var arr = [];
  //追加ボタンを押した時にaddressListに追加される
  var optionMember = document.createElement('option');
  //すべてのoption要素を取得する
  var elements = member.options;
  //順番を取得
　var num = member.selectedIndex;
　var idx = 0;

  //選択されたものを配列に格納する
  for(var i = 0;i<elements.length;i++){
    elements[num].selected = true;
    if(elements.selected){
      arr[idx] = i;
      idx++;
    }
  }

  //選択されたものを追加先のselectボックスに追加する
  for (var i=0;i<member.length; i++){
    if(elements[num].selected == true){
      arr.push(member[num].value);
      arr.push(member[num].innerText);
      // value値を取得
      optionMember.setAttribute('value',member[num].value);
      // 名前を取得する
      optionMember.innerText = arr[i];
      addressList.appendChild(optionMember);
    }
  }
}

よろしければ、教えていただけると幸いです。

Answer 1

既に回答があるので、捕捉的に書きますね。

セレクト要素に選択されているoption要素を配列で抜き出すプロパティ（selectedOptions）が存在するのでこちらを使って選択要素を取得しましょう。
また、選択要素のインナーHTMLを設定しているところ、配列に値を入れて設定していますが添え字が検討違いのインデックスになっているので、単純にoptionMember.innerTextに選択要素のインナーHTMLをそのまま設定しましょう。

一応、私の作成したサンプルです。

https://codepen.io/SE-studying-now/pen/PyYpbz

Comments

[aushijima]

ありがとうございます。こちらの方も試してみました。

Answer 2

原因は以下のコードですね。

var num = member.selectedIndex;
...省略...
for (...省略...) {
    elements[num].selected = true;
    if (elements.selected) {
	...省略...
    }
}

numに選択した要素番号を入れていますが、この値が変わらないので１つしか選択されません。
また、selectedIndexはたしか選択されているうちの最初の要素番号しか返さないはずなので、
やるのであれば選択肢全てをループし、それぞれ選択されているか確認するという方法が必要ですね。

質問部分に関してのアドバイスはこんな感じでしょうか。

Comments

[aushijima]

selectedIndexのこと気づきませんでした。不具合の理由なども丁寧に教えていただきありがとうございます。

Answer 3

こんな感じで

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#btn').addEventListener('click',function(e){
    [].forEach.call(document.querySelectorAll('#A option:checked'),function(x){
      document.querySelector('#B').appendChild(x);
    });
  });
});
</script>
<select id="B" size="7">
</select>

<select id="A" multiple="multiple" size="7">
  <option value="27648518">Aさん ([e-mail])</option>
  <option value="27648519">Bさん ([e-mail])</option>
  <option value="27648520">Cさん ([e-mail])</option>
  <option value="27648521">Dさん ([e-mail])</option>
</select>

<p>
<input type="button" id="btn" value="追加">
</p>

Comments

[aushijima]

実施したら、実現したい動きになりました。ありがとうございます。