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

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

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

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

Q&A

解決済

2回答

1129閲覧

セレクトボックスの項目の選択で表示/非表示を切り替えるフォームを1ページに複数設置したい

fujii0411

総合スコア9

JavaScript

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

0グッド

1クリップ

投稿2018/04/17 07:49

編集2018/04/19 01:42

前提・実現したいこと

*4/19 タグなどを修正しました
どうぞよろしくお願いいたします。

イメージ説明
添付の図のように、セレクトボックスの選択によって
表示/非表示を切り替えるコンテンツを作りたいです。
(青い部分は未選択、非表示の部分です)

発生している問題

こちらのページを参考に作ってみましたが、1つのフォームにつき1つのスクリプトの場合は
正常に動作しますが、複数設置すると2つ目以降が動作しません。

該当のソースコード

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function(e){ document.querySelector('[name=hoge1]','[name=hoge2]').addEventListener('change',function(e){ var t=e.target; var v=t.value; var p=t.parentNode.parentNode.parentNode; Array.prototype.forEach.call(p.querySelectorAll('li[id]'),function(x){ var dsp=''; if(x.getAttribute('id')!==v+'-select'){ dsp='none'; } x.style.display=dsp; }); }); }); </script> </head> <body> <div id="box1"> <select id="changeSelect" name="hoge1"> <option value="">選択肢1</option> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> </select> <ul> <li id="option1-select" style="display:none">「選択肢1」option1の表示内容</li> <li id="option2-select" style="display:none">「選択肢1」option2の表示内容</li> <li id="option3-select" style="display:none">「選択肢1」option3の表示内容</li> </ul> </div> <div id="box2"> <select id="changeSelect" name="hoge2"> <option value="">選択肢2</option> <option value="option4">option4</option> <option value="option5">option5</option> <option value="option6">option6</option> </select> <ul> <li id="option4-select" style="display:none">「選択肢2」option4の表示内容</li> <li id="option5-select" style="display:none">「選択肢2」option5の表示内容</li> <li id="option6-select" style="display:none">「選択肢2」option6の表示内容</li> </ul> </div> </body> </html>

試したこと

ご回答を受け、表示箇所のidの中身を変更してみましたが
変わらず2つ目のフォームは動作しません。
また前回の質問でベストアンサーに選ばせて頂いたタグを応用できるかと
試してみましたが、動作しませんでした。
以下、応用を試してみたコードです。

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> HTMLElement.prototype.trigger=function(eventStr){ if (document.createEvent) { var e = document.createEvent("HTMLEvents"); e.initEvent(eventStr, true, true ); return this.dispatchEvent(e); } else { var e = document.createEventObject(); return this.fireEvent("on"+eventStr, e); } }; window.addEventListener('DOMContentLoaded', function(e){ Array.prototype.forEach.call(document.querySelectorAll('[data-target]'),function(x){ x.addEventListener('change',function(e){ Array.prototype.forEach.call(document.querySelectorAll('[name='+e.target.getAttribute("name")+']'),function(y){ document.querySelector('#'+y.getAttribute('data-target')).style.display=(y.checked?"block":"none"); }); }); x.trigger("change"); }); }); </script> </head> <body> <div> <select> <option value="">選択肢1</option> <option value="option1" name="r1" data-target="box01">option1</option> <option value="option2" name="r2" data-target="box02">option2</option> <option value="option3" name="r3" data-target="box03">option3</option> </select> <ul> <li id="box01">「選択肢1」option1の表示内容</li> <li id="box02">「選択肢1」option2の表示内容</li> <li id="box03">「選択肢1」option3の表示内容</li> </ul> </div> </body> </html>

スクリプトやタグなどは、セレクトボックスを使用する以外の点については
どのように変わっても構いません。
メンテナンスの観点から、できる限りコードは少ない方が嬉しいです。
また、表示/非表示が切り替わったコンテンツの中に同じような
セレクトボックスを作り、入れ込構造のようにできればなお助かります。

引き続き、どうぞよろしくお願いいたします。

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

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

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

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

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

m.ts10806

2018/04/17 07:55 編集

タグと質問内容の調整をお願いします。Java→JavaScript (似て非なるもの。例えるならメロンとメロンパンです。) あとhtmlもタグに入れておいてください。
m.ts10806

2018/04/17 07:52

ただ、前回質問を見ていますと、応用でいけそうに思うのですが、どの辺りにつまずいているのでしょうか?
m.ts10806

2018/04/17 08:15

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わります。
fujii0411

2018/04/19 01:44

ご回答をありがとうございます。記述、応用などの個所を修正いたしました。また初心者アイコンは投稿当初から付けていますが、表示されておりませんでしょうか?
m.ts10806

2018/04/19 02:05

>初心者アイコン 私が見落としていただけかもしれませんね。失礼しました。
guest

回答2

0

ベストアンサー

「該当のソースコード」の方ですが、

指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。

この部分が肝になると思います。

つまり複数指定しても1つ目のselectしか取得せず、その1つ目のイベントのみ発生するので2つ目のselectは空ぶりされ続けるわけです。

ひとまずquerySelectorAll()でselectを取得しておき、それぞれにchangeイベントをaddし、同じメソッドを実行するようにされては?

下記で想定通り動いているかどうかはご確認ください。

js

1window.addEventListener('DOMContentLoaded', function(e){ 2 var matches = document.querySelectorAll("select"); 3 for(var i=0;i<matches.length;i++){ 4 matches[i].addEventListener('change',function(e){ 5 display(e); 6 }); 7 } 8 function display(e){ 9 var t=e.target; 10 var v=t.value; 11 var p=t.parentNode.parentNode.parentNode; 12 Array.prototype.forEach.call(p.querySelectorAll('li[id]'),function(x){ 13 var dsp=''; 14 if(x.getAttribute('id')!==v+'-select'){ 15 dsp='none'; 16 } 17 x.style.display=dsp; 18 }); 19 } 20});

※もっと簡単にできそうに思いますが、ひとまず。

「 試したこと」の方のソースコードはあまりちゃんと読み込めてないですが、難しくやろうとしすぎのようにも思います。

投稿2018/04/19 02:40

編集2018/04/19 02:41
m.ts10806

総合スコア80765

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

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

fujii0411

2018/04/19 04:06

ご回答をありがとうございます!記述して頂いたコードを試しましたら、両方のフォームが動作するようになりました。しかし、片方が開くともう片方が閉じてしまうので、両方開いたままにするということは可能でしょうか?要望が多くて申し訳りませんが、お力添えを頂けたらと存じます。
m.ts10806

2018/04/19 04:12

dsp='none'; の分岐のところを調整すればできそうに思いますが、難しいでしょうか? t はselect自身のエレメントが入っているので、その配下のみに適用する というイメージですよね。
m.ts10806

2018/04/19 04:18

あいや、selectの親ノードを取得する必要がありそうですね。 もしかしたらhtmlも多少いじることになるかもしれません。 やってみます。
m.ts10806

2018/04/19 04:22

var p=t.parentNode.parentNode.parentNode; ↓ var p=t.parentNode; でいけるはず。 元々が遡りすぎですね。 document.としているのとほぼ変わりません。
m.ts10806

2018/04/19 04:29

こういったエレメントの操作をする際は段階段階でconsole.log()などで「今どこを使っているか」を確認しながら組んでいくと分かりやすいです。 想定通りのエレメントが掴めているか、関係のない情報は入っていないか、とかですね。
fujii0411

2018/04/19 07:04

ありがとうございます、解決しました!要望が多いにも関わらず、丁寧にご回答いただき誠に有難うございました。
guest

0

tr 要素の id の値(option1-selectなど)がページ内で重複しているためかと思います。
id の値はページ内で一意となる必要がありますので、重複しないように変更してみてください。

投稿2018/04/17 08:43

編集2018/04/17 08:46
Lulucom

総合スコア1899

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

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

Lulucom

2018/04/17 08:58

すみません、mts10806 さんの質問修正依頼をよく見ずに回答してしまいました。 mts10806 さんのご指摘通りタグの修正をお願いします。
fujii0411

2018/04/19 01:45

ご回答をありがとうございます。タグを修正しましたが、動作しないようです。
m.ts10806

2018/04/19 01:45

id=changeSelectが被っているのでそこは問題としてあると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問