プルダウン変更時に表示される内容を変える場合のコードをスマートに書きたい

Question

プルダウンを変更した際に、表示される内容を変更する場合、以下のようなコードを書いています。

このJSの場合、同じようなコードを書いており、項目が増えた場合に間違えやすいのと
分かりにくいため、もう少しスマートな書き方にしたいのですが、わかる方教えていただけますでしょうか。
基本的な質問ですみません。。どうぞよろしくお願いいたします。

<select name="area", id="area">
  <option value="北海道">北海道</option>
  <option value="東北">東北</option>
  <option value="関東">関東</option>
  <option value="北陸">北陸</option>
  <option value="関西">関西</option>
</select>
<br>
<div class="area00 active">
  <p>ラーメン</p>
</div>
<div class="area01">
  <p>ずんだ餅</p>
</div>
<div class="area02">
  <p>餃子</p>
</div>
<div class="area03">
  <p>お刺身</p>
</div>
<div class="area04">
  <p>お好み焼き</p>
</div>

$(function(){
  $('.area01, .area02, .area03, .area04').hide();
  $('.area00').show();
  $('#area').change(function(e){
    var val = $(e.target).val();
    if(val == "北海道"){
      $('.area01, .area02, .area03, .area04').hide();
      $('.area00').show();
    }else if(val == "東北"){
      $('.area00, .area02, .area03, .area04').hide();
      $('.area01').show();
    }else if(val == "関東"){
      $('.area00, .area01, .area03, .area04').hide();
      $('.area02').show();
    }else if(val == "北陸"){
      $('.area00, .area01, .area02, .area04').hide();
      $('.area03').show();
    }else if(val == "関西"){
      $('.area00, .area01, .area02, .area03').hide();
      $('.area04').show();
    }
  })
})

Answer 1

• selectのvalueは別の用途がありそうなのでカスタムデータをもたせる
• エリアは二重設定されることはないのでclassよりもカスタムデータにする

codepen selectbox choose

Answer 2

いろいろな方法があるかと思いますが、一例として、要素のindexと、jQueryの関数とループを使う方法はいかがでしょうか？

例えば HTML は、以下のように、内容div全てをid=“contents”のdivで囲みます。そして、内容のdivと、それと対応するoptionが、各親要素内で同じ番号順になるように配置します。

北海道optionは、#area select要素内で１番目、
そして北海道の内容である、
ラーメンpを含むdivは、#contents div要素内で１番目、
というようにです。

<select name="area", id="area">
  <option value="北海道">北海道</option>
  <option value="東北">東北</option>
  <option value="関東">関東</option>
  <option value="北陸">北陸</option>
  <option value="関西">関西</option>
</select>
<br>
<div id="contents">
  <div>
    <p>ラーメン</p>
  </div>
  <div>
    <p>ずんだ餅</p>
  </div>
  <div>
    <p>餃子</p>
  </div>
  <div>
    <p>お刺身</p>
  </div>
  <div>
    <p>お好み焼き</p>
  </div>
</div>

そして、scriptは以下のように書きます。

$(function(){

  function displayContentOf(selectedIndex) {
    if (! Number.isInteger(selectedIndex) || selectedIndex < 0) {
      return;
    }
    $('#contents').children().each(function(index) {
      if (index === selectedIndex) {
        $(this).show();
      } else {
        $(this).hide();
      }
    })
  }

  const defaultIndex = 0;
  $('#area').selectedIndex = defaultIndex;
  $('#area').val('北海道');
  displayContentOf(defaultIndex);

  $('#area').change(function (e) {
    const selectedIndex = e.currentTarget.selectedIndex;
    displayContentOf(selectedIndex);
  });

});

これなら、仮にHTMLでエリアや内容を追加したり順番を入れ替えても、scriptは変更する必要がありません。

ただし、select内のエリアoptionと、#contents div内の内容divの並び順を、必ず一致させる必要があります。

また、初期表示するエリアを変更した場合は、scriptのデフォルト値の部分を書き直す必要があります。

が、if文で個別に内容divを指定して書くよりは、変更時の手間が大分省けるのではないでしょうか。

なお、上のHTMLの例では内容divの属性は不要だったので消しましたが、もちろん他でご入用の場合は、内容のdivやpにidやclassなどの属性を追加していただいても大丈夫です。

それと、#contents div内の子div要素は全て、cssでdisplay:noneと設定しておくのがおすすめです。ページを開いた直後に全エリアの全内容が一瞬表示されてしまうチラつき現象が無くなりますので。cssで全非表示にしておき、jQueryで必要な部分だけ表示する、という流れです。

ご参考までに、以下に、詳しい解説コメント付きのコードも添えておきます。コード自体は、上記のscriptと同じです。

$(function(){

  // 選択エリアの内容を表示する関数
  function displayContentOf(selectedIndex) {

    // 引数の値が整数でない場合、または0以下の場合は何もしない
    if (! Number.isInteger(selectedIndex) || selectedIndex < 0) {
      return;
    }
    // 以下、selectedIndexの値は正の整数であることが保証されるため安全に使える

    // contents div内にある 各子要素divをループを使って１つ１つ順に処理する
    $('#contents').children().each(function(index) {
      /**
       * この引数indexは、処理する順番がきた子要素divが、
       * #contents div要素内で何番目の子にあたるかを示す番号.
       * 開始番号は 0. つまり、
       * ラーメンpを含むdivは index 0
       * ずんだ餅pを含むdivは index 1
       * ここの処理では直接は関係しないが参考までに、#area select要素内で、
       * 北海道optionは index 0
       * 東北optionは index 1
       * ..というように、同じ並びで同じ番号をもつため、それを利用する
       */

      // もしも子要素divのindexが、selectの選択中indexと同じ番号であれば、
      if (index === selectedIndex) {
        // divを表示する
        $(this).show();

      } else {
        // それ以外のdivである場合は非表示にする
        $(this).hide();
      }
      /**
       * ここのthisは、#contents div要素の子要素div 1つを示す
       */
    })
  }

  // ページを開いた直後のデフォルト表示を設定
  const defaultIndex = 0;
  $('#area').selectedIndex = defaultIndex;
  $('#area').val('北海道');
  displayContentOf(defaultIndex);
  /**
   * selectedIndexを設定しただけでは、そのoptionが表示されないため、
   * val()でvalueを指定して、selectの中にoption値を表示させる
   */

  // select要素の値が変更されたら、
  $('#area').change(function (e) {

    // 選択中のindex番号を取得する
    const selectedIndex = e.currentTarget.selectedIndex;
    /**
     * selectedIndexは、
     * select要素の中で、選択されたoptionが何番目にあるか、を示す番号.
     * ユーザーがselect要素を操作して変更すると、自動で設定される.
     * indexの開始番号は、0（※ 1ではないので注意）
     */

    // 選択エリアの内容を表示する関数を実行
    displayContentOf(selectedIndex);
  });

});

Comments

[spbob]

みなさま。

お忙しい中、回答頂きましてありがとうございました。
分かりやすく解説をつけてくださった、arenomarbさんの回答を採用させていただきました。
こちらを実装する上でのリスクの点についても初心者で気をつけなければならないこととして、
参考にさせていただきます。

まだまだJS初心者で、一つの機能（といっていいのか分かりませんが汗）でも、
色々やり方があると思い、勉強になりました。

他に回答してくださった、yambejpさん、m.ts10806さんの回答についても参考にさせていただきます。
ありがとうございました。

Answer 3

法則がなければ要件に影響のない範囲で法則を作ることです。

下記のようにvalueをコード（area_xx）と紐づければ見えてきませんか？

  <option value="1">北海道</option>
  <option value="2">東北</option>
  <option value="3">関東</option>
  <option value="4">北陸</option>
  <option value="5">関西</option>

あと、1個1個指定してhide()してますが、
全部hide()して表示したいのだけshow()すれば結果は同じです。

画面ないに1つしかないのでしたらclassよりIDのほうが良いですし、こういうHTMLにしてみては。

<select name="area" id="area">
  <option value="1">北海道</option>
  <option value="2">東北</option>
  <option value="3">関東</option>
  <option value="4">北陸</option>
  <option value="5">関西</option>
</select>
<br>
<div id="area01" class="area active">
  <p>ラーメン</p>
</div>
<div id="area02" class="area">
  <p>ずんだ餅</p>
</div>
<div id="area03" class="area">
  <p>餃子</p>
</div>
<div id="area04" class="area">
  <p>お刺身</p>
</div>
<div id="area05" class="area">
  <p>お好み焼き</p>
</div>