Q&A
複数のセレクトボックスで選択した要素を全部表示させたい
HTMLでWEBサイト、簡素なログイン画面を作っています。
複数あるリストボックスで数字を選び、数字の組み合わせにより目的のページに飛ぶというものです
その中で、リストボックスで選んだ要素によってページ内に選んだ要素をテキストで表示させたいと考えています。
・リストボックスで選んだ内容をテキストで表示させたい。
・表示したテキストが重ならないようにしたい。
・リストボックスと表示するテキストをバランスよくそろえたい。
発生している問題・エラーメッセージ
１．４つあるリストボックスの内最初のリストボックスで要素を選択すると、下に選んだ要素によるテキストが表示される。 ２．次のリストボックスで要素を選択すると１．で表示されていたテキストがの上にテキストが表示される。 ３．３番目、４番目のリストボックスも同じようになり、最後は4番目で選んだの要素のテキストが最前列で表示される。 ※４番目の選択内容の要素が出ているときに1.2.3番目のリストボックスを再選択しても４番目の選択内容の要素のテキストが表示される。 ４．2番目、3番目、4番目でそれぞれ「－－－」を選択すると前のリストボックスで選んだ要素のテキストが表示される。
該当のソースコード
<!DOCTYPE html> <html> <head> <!--utf-8コード（文字コード）を指定--> <meta charset="utf-8"> <!--検索結果やブラウザのタブに表示されるテキスト--> <title>練習1</title> <!--古いIEによるデザイン崩れを防ぐ--> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--検索結果下に表示されるページの説明--> <meta name="description" content="練習内容しかない。" /> <!--検索エンジンに対してこのページを掲載しないよう要求--> <meta name="robots" content="noindex,nofollow" /> <!--javascriptをスクリプトの言語に設定する--> <script type="text/javascript" language="javascript"> //関数宣言 function selectboxChange() { target = document.getElementById("output1"); target = document.getElementById("output2"); target = document.getElementById("output3"); target = document.getElementById("output4"); selindex1 = document.form1.Select1.selectedIndex; selindex2 = document.form2.Select2.selectedIndex; selindex3 = document.form3.Select3.selectedIndex; selindex4 = document.form4.Select4.selectedIndex; switch (selindex1) { case 1: target.innerHTML = "要素1が選択されています。<br/>"; break; case 2: target.innerHTML = "要素2が選択されています。<br/>"; break; case 3: target.innerHTML = "要素3が選択されています。<br/>"; break; case 4: target.innerHTML = "要素4が選択されています。<br/>"; break; case 5: target.innerHTML = "要素5が選択されています。<br/>"; break; case 6: target.innerHTML = "要素6が選択されています。<br/>"; break; case 7: target.innerHTML = "要素7が選択されています。<br/>"; break; case 8: target.innerHTML = "要素8が選択されています。<br/>"; break; case 9: target.innerHTML = "要素9が選択されています。<br/>"; break; } switch (selindex2) { case 1: target.innerHTML = "要素1が選択されています。<br/>"; break; case 2: target.innerHTML = "要素2が選択されています。<br/>"; break; case 3: target.innerHTML = "要素3が選択されています。<br/>"; break; case 4: target.innerHTML = "要素4が選択されています。<br/>"; break; case 5: target.innerHTML = "要素5が選択されています。<br/>"; break; case 6: target.innerHTML = "要素6が選択されています。<br/>"; break; case 7: target.innerHTML = "要素7が選択されています。<br/>"; break; case 8: target.innerHTML = "要素8が選択されています。<br/>"; break; case 9: target.innerHTML = "要素9が選択されています。<br/>"; break; } switch (selindex3) { case 1: target.innerHTML = "要素1が選択されています。<br/>"; break; case 2: target.innerHTML = "要素2が選択されています。<br/>"; break; case 3: target.innerHTML = "要素3が選択されています。<br/>"; break; case 4: target.innerHTML = "要素4が選択されています。<br/>"; break; case 5: target.innerHTML = "要素5が選択されています。<br/>"; break; case 6: target.innerHTML = "要素6が選択されています。<br/>"; break; case 7: target.innerHTML = "要素7が選択されています。<br/>"; break; case 8: target.innerHTML = "要素8が選択されています。<br/>"; break; case 9: target.innerHTML = "要素9が選択されています。<br/>"; break; } switch (selindex4) { case 1: target.innerHTML = "要素1が選択されています。<br/>"; break; case 2: target.innerHTML = "要素2が選択されています。<br/>"; break; case 3: target.innerHTML = "要素3が選択されています。<br/>"; break; case 4: target.innerHTML = "要素4が選択されています。<br/>"; break; case 5: target.innerHTML = "要素5が選択されています。<br/>"; break; case 6: target.innerHTML = "要素6が選択されています。<br/>"; break; case 7: target.innerHTML = "要素7が選択されています。<br/>"; break; case 8: target.innerHTML = "要素8が選択されています。<br/>"; break; case 9: target.innerHTML = "要素9が選択されています。<br/>"; break; } } </script> </head> <body> <h1>練習プログラム/ログインID４桁</h1> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option>要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> <option>要素6</option> <option>要素7</option> <option>要素8</option> <option>要素9</option> </select> </form> <form name="form2" action=""> <select id="Select2" onchange="selectboxChange();"> <option>---</option> <option>要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> <option>要素6</option> <option>要素7</option> <option>要素8</option> <option>要素9</option> </select> </form> <form name="form3" action=""> <select id="Select3" onchange="selectboxChange();"> <option>---</option> <option>要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> <option>要素6</option> <option>要素7</option> <option>要素8</option> <option>要素9</option> </select> </form> <form name="form4" action=""> <select id="Select4" onchange="selectboxChange();"> <option>---</option> <option>要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> <option>要素6</option> <option>要素7</option> <option>要素8</option> <option>要素9</option> </select> </form> <div id="output1" style="position:absolute; top:100px; left:200px;"><br/></div> <div id="output2" style="position:absolute; top:200px; left:200px;"><br/></div> <div id="output3" style="position:absolute; top:300px; left:200px;"><br/></div> <div id="output4" style="position:absolute; top:400px; left:200px;"><br/></div> </body> </html>
試したこと
最後に記述してあるそれぞれの<div>に別々のpositionを与えたが表示されるテキストは４つともtop:400px; left:200pxで問題は治らなかった
また<div>に<br>を与えて改行させようとしても表示は変わらなかった。
補足情報（FW/ツールのバージョンなど）
visual studio codeを使用
visual studio codeの中のLive Server 5.6.1を使って実行しています。
ローカルディスクのファイルの中にこのコードが書かれたhtmlファイルを保存している。
HTMLを触り始めたばかりなので様々なサイトを見ながら制作を進めています。コードがおかしかったり、そもそも環境が違う、
こんだけの情報じゃわからない等あればズバズバ言ってください。
回答1件
0
ベストアンサー
コードを見るとまだまだ学習すべきことが多くありそうです。
js
1 target = document.getElementById("output1"); 2 target = document.getElementById("output2"); 3 target = document.getElementById("output3"); 4 target = document.getElementById("output4");
これは、target を4回上書きしているので、結局、target の中身は output4 です。
ですのでどのセレクトボックスで選択しても output4 に出力されます。
js
1 target1 = document.getElementById("output1"); 2 target2 = document.getElementById("output2"); 3 target3 = document.getElementById("output3"); 4 target4 = document.getElementById("output4");
と変数はそれぞれ用意しましょう。
selectedIndexで場合分け(switch)してますが、そのようなことをしなくても、value で選択したデータを取得できます。
上記のことを考慮すると下記のようなコードになります。
js
1 //関数宣言 2 function selectboxChange() { 3 target1 = document.getElementById("output1"); 4 target2 = document.getElementById("output2"); 5 target3 = document.getElementById("output3"); 6 target4 = document.getElementById("output4"); 7 8 selvalue1 = document.form1.Select1.value; 9 selvalue2 = document.form2.Select2.value; 10 selvalue3 = document.form3.Select3.value; 11 selvalue4 = document.form4.Select4.value; 12 13 target1.innerHTML = selvalue1 + "が選択されています。"; 14 target2.innerHTML = selvalue2 + "が選択されています。"; 15 target3.innerHTML = selvalue3 + "が選択されています。"; 16 target4.innerHTML = selvalue4 + "が選択されています。"; 17 }
どうでしょうか。だいぶスッキリしたでしょう。
さらに、関数の引数をうまくつかうともっとシンプルにできます。
js
1 //関数宣言 2 function selectboxChange(selbox, idx) { 3 var target = document.getElementById("output" + idx); 4 target.innerHTML = selbox.value + "が選択されています。"; 5 }
html
1 <form name="form1" action=""> 2 <select id="Select1" onchange="selectboxChange(this,1);"> 3 ・・・略 4 5 <form name="form2" action=""> 6 <select id="Select2" onchange="selectboxChange(this,2);"> 7 ・・・略 8 9 10 <form name="form2" action=""> 11 <select id="Select2" onchange="selectboxChange(this,3);"> 12 ・・・略 13 14 15 <form name="form2" action=""> 16 <select id="Select2" onchange="selectboxChange(this,4);"> 17 ・・・略
どうでしょうか。2行になりました。
引数のthisはイベントが発生した要素になります。
あと、変数は var をつけて宣言したほうが安全です。理由はWEB検索してみてください。
投稿2019/10/24 16:19
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/25 08:55