２つのセレクトボックスを連動させたものを複数配置したい

Question

HTML・JavaScriptで２つのselectボックスを連動させるものを複数置きたいのですが、うまくいきません。

実現したいこと

・２つのセレクトボックスを連動させる
・２つのセレクトボックスの内1つ目の方は既に選択された状態で読み込まれる
・それぞれ連動するものを複数配置する

下記のJSでは、optionのvalueがswitchvalueの場合にdivの内容が表示されるのですが、
・ValueがAの場合は一方のDivを表示
・ValueがBの場合は他方のDivを表示
というようにしたいです。

JSをどのように書き換えればいいのでしょうか？

該当のソースコード

$(function() {
  $('.js-form-disp-switch').change(function () {
    let selectVal = $(this).val();
    let switchVal = $(this).data('switchvalue');
    let hideTgt = $(this).data('target');
    if ( selectVal == switchVal ) {
      $(hideTgt).slideDown();
    } else {
      $(hideTgt).slideUp();
    }
  });
});

<select data-target=".js-form-disp-tgt" class="js-form-disp-switch" name="" data-switchvalue="swicthvalue">
  <option value="" selected>1</option><option value="swicthvalue">2</option>
</select>
<div class="js-form-disp-tgt" style="display:none;">
    content　※２が選択されている場合に表示
</div>
<div class="js-form-disp-tgt" style="">
    content　※１が選択されている場合に表示
</div>

<select data-target=".js-form-disp-tgt2" class="js-form-disp-switch" name="" data-switchvalue="swicthvalue">
  <option value="" selected>1</option><option value="swicthvalue">2</option>
</select>
<div class="js-form-disp-tgt2" style="display:none;">
    content ※２が選択されている場合に表示
</div>
<div class="js-form-disp-tgt" style="">
    content※１が選択されている場合に表示
</div>

Answer 1

このような場合、イベントの発生元とそのイベントを反映して表示を変える要素群をひとまとめにしたdivなどでくくると見通しがよくなります。

たとえば以下のように <div class="content-switch"> でくくっておきます。

+ <div class="content-switch">
    <select data-target=".js-form-disp-tgt" class="js-form-disp-switch" name="" data-switchvalue="swicthvalue">
      <option value="" selected>1</option><option value="swicthvalue">2</option>
    </select>
    <div class="js-form-disp-tgt" style="display:none;">
      content　※２が選択されている場合に表示
    </div>
    <div class="js-form-disp-tgt" style="">
      content　※１が選択されている場合に表示
    </div>
+ </div>

このようなdiv.content-switchが複数あるとして、質問の要件を満たすjQuery のコードの一例としては以下のように書けます。

  $('.content-switch').on('change', function ({ target: { value }}) {
    $('.js-form-disp-tgt', this).css('display', index => (
       ['swicthvalue', ''][index] === value ? 'block' : 'none'
    ));
  });

• codepen 👉 https://codepen.io/su507/pen/RwJgKey?editors=1010

Answer 2

質問者様のアプローチですと、表示非表示を切り替えたい子要素が3つ以上あるとき対応できなくなります。

3つ以上でも対応可能な方法は、

• セレクトボックスのoption全てにvalueををつける
• （表示非表示を切り替える）divを一旦全て非表示にする
• セレクトボックスで選択されたoptionのvalueと、divのdata属性が一致するものだけ表示する

というふうにしてみました！

完成コード例

• 動作確認用サンプル： https://jsfiddle.net/mh746cq2/1/

<div class="container">
  <select class="select" required>
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <div data-select-value="1" class="switch-box is-active">1</div>
  <div data-select-value="2" class="switch-box">2</div>
  <div data-select-value="3" class="switch-box">3</div>
</div>

<div class="container">
  <select class="select" required>
    <option value="1" selected>1</option>
    <option value="2">2</option>
  </select>
  
  <div data-select-value="1" class="switch-box is-active">1</div>
  <div data-select-value="2" class="switch-box">2</div>
</div>

<div class="container">
  <select class="select" required>
    <option value="1" selected>1</option>
    <option value="2">2</option>
  </select>
  
  <div data-select-value="1" class="switch-box is-active">1</div>
  <div data-select-value="2" class="switch-box">2</div>
</div>

.switch-box {
  display: none;
}

.switch-box.is-active {
  display: block;
}

$(function() {
  $('.select').on('change', function() {
    // セレクトボックスで選択されたvalueを取得
    const selectVal = $(this).val();

    // 選択したセレクトボックスの親要素の.containerを取得
    const container = $(this).closest('.container');

    // 一旦子要素の.switch-boxを全部非表示にして
    container.find('.switch-box').slideUp();

    // セレクトで選択したvalueと一致するdata属性の要素のみ表示
    container.find(`[data-select-value="${selectVal}"]`).slideDown();
  })
});

Comments

[Cocode]

もしご質問の内容の解釈を間違えていたら申し訳ございませんm(_ _)m

[Ito_Kazuki_]

ありがとうございます！