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

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

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

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

解決済

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

fujii0411
fujii0411

総合スコア9

JavaScript

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

2回答

0評価

1クリップ

318閲覧

投稿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>

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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