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

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

ただいまの
回答率

90.61%

  • JavaScript

    15923questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 161

fujii0411

score 2

 前提・実現したいこと

*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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/04/17 17:15

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

    キャンセル

  • fujii0411

    2018/04/19 10:44

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

    キャンセル

  • mts10806

    2018/04/19 11:05

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

    キャンセル

回答 2

checkベストアンサー

+3

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

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

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

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

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

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

window.addEventListener('DOMContentLoaded', function(e){
    var matches = document.querySelectorAll("select");
    for(var i=0;i<matches.length;i++){
        matches[i].addEventListener('change',function(e){
            display(e);
        });
    }
    function display(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;
        });
    }
});


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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/19 13:06

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

    キャンセル

  • 2018/04/19 13:12

    dsp='none';

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

    キャンセル

  • 2018/04/19 13:18

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

    キャンセル

  • 2018/04/19 13:22

    var p=t.parentNode.parentNode.parentNode;



    var p=t.parentNode;

    でいけるはず。
    元々が遡りすぎですね。
    document.としているのとほぼ変わりません。

    キャンセル

  • 2018/04/19 13:29

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

    キャンセル

  • 2018/04/19 16:04

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

    キャンセル

+2

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/17 17:58

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

    キャンセル

  • 2018/04/19 10:45

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

    キャンセル

  • 2018/04/19 10:45

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

    キャンセル

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

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    15923questions

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