質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

1969閲覧

option要素を追加したい

aushijima

総合スコア55

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/09/27 06:10

●実現したいこと
下の図で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さん (x.xxxxx@xxxxx.jp)</option> <option value="27648519">Bさん (x.xxxxx@xxxxx.jp)</option> <option value="27648520">Cさん (x.xxxxx@xxxxx.jp)</option> <option value="27648521">Dさん (x.xxxxx@xxxxx.jp)</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); } } }

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

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

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

投稿2018/09/27 06:50

SE-studying-now

総合スコア351

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aushijima

2018/09/28 02:54

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

0

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

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

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

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

投稿2018/09/27 06:30

dice142

総合スコア5158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aushijima

2018/09/28 02:49

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

0

ベストアンサー

こんな感じで

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#btn').addEventListener('click',function(e){ 4 [].forEach.call(document.querySelectorAll('#A option:checked'),function(x){ 5 document.querySelector('#B').appendChild(x); 6 }); 7 }); 8}); 9</script> 10<select id="B" size="7"> 11</select> 12 13<select id="A" multiple="multiple" size="7"> 14 <option value="27648518">Aさん (x.xxxxx@xxxxx.jp)</option> 15 <option value="27648519">Bさん (x.xxxxx@xxxxx.jp)</option> 16 <option value="27648520">Cさん (x.xxxxx@xxxxx.jp)</option> 17 <option value="27648521">Dさん (x.xxxxx@xxxxx.jp)</option> 18</select> 19 20<p> 21<input type="button" id="btn" value="追加"> 22</p>

投稿2018/09/27 06:29

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aushijima

2018/09/28 02:48

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問