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

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

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

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

HTML

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

Q&A

1回答

917閲覧

3つ配置したセレクトボックスのうち選択した2つのみ表示させたい

yumaru3

総合スコア0

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2020/09/07 08:45

編集2022/01/12 10:55

実現したいこと

タイトルの通りですが、セレクトボックスで選択したものを■選ばれた二人■の場所に1つは表示させることができたのですが、残り2つを表示させる方法がわかりません。

実現したいことですが、
・セレクトボックスを3つ配置し、選択したものを2つのみ表示させたい。
・同じセレクトボックスから二つ表示できてしまうので、各セレクトボックスにつき1つまでしか表示できないようにしたい。
以上の2つです。

助言頂けると助かります。。。

該当のソースコード

javascript

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"/> 5 <title></title> 6</head> 7<body> 8 9 <select id="select1" onchange="myouji1()"> 10 <option value="">選択なし</option> 11 <option value="本田">本田</option> 12 <option value="城田">城田</option> 13 <option value="中田">中田</option> 14 </select> 15 16 <select id="select2" onchange="myouji2()"> 17 <option value="">選択なし</option> 18 <option value="藤原">藤原</option> 19 <option value="藤井">藤井</option> 20 <option value="藤岡">藤岡</option> 21 </select> 22 23 <select id="select3" onchange="myouji3()"> 24 <option value="">選択なし</option> 25 <option value="アリス">アリス</option> 26 <option value="カレン">カレン</option> 27 <option value="クララ">クララ</option> 28 </select> 29 30 <div id="cocoichi">■選ばれた二人■ 31 <div></div> 32 <div></div> 33 </div> 34 35 <script type="text/javascript"> 36 let cocoichi=document.getElementById("cocoichi"); 37 38 function myouji1(){ 39 let namae=document.getElementById("cocoichi").firstElementChild; 40 addChild(namae); 41 } 42 43 function addChild(namae){ 44 let select1=document.getElementById("select1").value; 45 namae.innerText=select1; 46 namae=cocoichi.appendChild(namae); 47 } 48 </script> 49</body> 50</html> 51

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

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

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

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

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

m.ts10806

2020/09/07 08:53

>初投稿、超初心者失礼します 「初心者アイコン」がありますし、つけられてますし、書かなくても良いかと思います(その分文字数使うのはもったいないです) >後2つをどうしても表示できませんでした。 「できない」ではなく「起きている現象」を書きましょう。 エラーが出ているならエラーも確認してください。 https://teratail.com/help/question-tips#questionTips3-4
m.ts10806

2020/09/07 08:55

エラー確認方法: ブラウザの「開発ツール」を起動(F12)、「コンソール」タブ
guest

回答1

0

エラー出ます。

Uncaught ReferenceError: myouji2 is not defined
Uncaught ReferenceError: myouji3 is not defined

意味についてはGoogle翻訳にかけるなりなんなり調べてもらうとして、
現状の作りは非常に効率が悪いと思います。
「選択する」「選択した情報をリストに追記する」はどれを選んでも共通です。
同じ動作をするのに要素が増えればメソッドが増えるというのはよろしくありません。
法則性があるものはなるべくまとめるべきです。

ひとまず、下記で、「選択した自身」が取れます。

html

1 <select id="select1" class="select"> 2 <option value="">選択なし</option> 3 <option value="本田">本田</option> 4 <option value="城田">城田</option> 5 <option value="中田">中田</option> 6 </select> 7 8 <select id="select2" class="select"> 9 <option value="">選択なし</option> 10 <option value="藤原">藤原</option> 11 <option value="藤井">藤井</option> 12 <option value="藤岡">藤岡</option> 13 </select> 14 15 <select id="select3" class="select"> 16 <option value="">選択なし</option> 17 <option value="アリス">アリス</option> 18 <option value="カレン">カレン</option> 19 <option value="クララ">クララ</option> 20 </select>

js

1window.addEventListener('DOMContentLoaded', (event) => { 2 const selectElements = document.querySelectorAll('.select'); 3 for(i=0;i<selectElements.length;i++){ 4 selectElements[i].addEventListener("change",function(e){ 5 console.log(e.currentTarget); 6 7 }); 8 } 9});

「自身」が取れれば、「現在の選択値」もとれます。
例:console.log(e.currentTarget.value);

「自身」が取れるので、「どのSELECTなのか」も分かっています。
IDが振られているのでIDも参照してみてください。
例:console.log(e.currentTarget.id);

あとは、「既に選択された」ということをどこかに持っておく必要があります。
グローバル変数に「フラグ」として持っておけば良いかなと思います。
「2個まで」なら全体のカウントを持ってみたり。

js

1let selected = {}; 2let count = 0; 3window.addEventListener('DOMContentLoaded', (event) => { 4 const selectElements = document.querySelectorAll('.select'); 5 for(i=0;i<selectElements.length;i++){ 6 selectElements[i].addEventListener("change",function(e){ 7 if(e.currentTarget.id.value != "" && Object.keys(selected).indexOf(e.currentTarget.id) === -1 && count < 2){ 8 selected[e.currentTarget.id] = true; 9 /*一覧に追加する処理*/ 10 count++; 11 }else{ 12 console.log("追加できません。"); 13 } 14 }); 15 } 16});

あとは参考に頑張ってみてください。
Window: DOMContentLoaded イベント
Document.querySelectorAll()
EventTarget.addEventListener()
HTMLElement: change イベント

※すんごくざっくり作ったのでたぶん抜けはあります。

投稿2020/09/07 09:18

m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問