メールフォーム周りについて(2)-項目の絞り込み

ラジオボタンの選択をセレクトボックスに反映

ラジオボタンとセレクトボックスに共通のクラス名をつけて、表示・非表示を連動しました。

See the Pen
NmxjjW by kazu-1 (@kazu-1)
on CodePen.

ラジオボタンでなくても、セレクトボックス同士、チェックボックスなど一対多の絞り込みに対応する筈です。

html

<dl>
  <dt>希望参加形態</dt>
  <dd>
      <label><input type="radio" name="keitai" class="sanka" value="参加者">参加者</label>
      <label><input type="radio" name="keitai" class="toudan" value="登壇者">登壇者</label>
      <label><input type="radio" name="keitai" class="borantia" value="ボランティア">ボランティア</label>
  </dd>
</dl>
<dl>
  <dt>希望地</dt>
  <dd>
    <select class="kibouchi" name="希望地">
      <option class="sanka borantia" value="北海道">北海道（参加者・ボランティア）</option>
      <option class="sanka" value="青森県">青森県（参加者）</option>
      <option class="sanka toudan" value="岩手県">岩手県（参加者・登壇者）</option>
      <option class="sanka" value="宮城県">宮城県（参加者）</option>
      <option class="sanka" value="秋田県">秋田県（参加者）</option>
      <option class="sanka" value="山形県">山形県（参加者）</option>
<!--  省略-->
      <option class="sanka" value="長崎県">長崎県（参加者）</option>
      <option class="sanka borantia" value="札幌支店">熊本県（参加者・ボランティア）</option>
      <option class="sanka borantia" value="熊本県">大分県（参加者・ボランティア）</option>
      <option class="sanka toudan" value="宮崎県">宮崎県（参加者・登壇者）</option>
      <option class="sanka toudan borantia" value="鹿児島県">鹿児島県（参加者・ボランティア・登壇者）</option>
      <option class="sanka borantia" value="沖縄県">沖縄県（参加者・ボランティア）</option>
    </select>
  </dd>
</dl>

html

1.選択側と選択される側に共通のクラス名を入れます。
今回の場合は、sanka、toudan、borantiaの３つです。
2.選択側を特定するセレクタと選択される側にも範囲を絞り込めるセレクタを入れます。
今回の場合は、inputとkibouchiです。

jquery

jquery

$(function() {
  $('input').change(function() {          //inputの値が変わったとき発火
    let keitai = $(this).attr("class");   //1.inputのクラス名を取得
    let kibouchi = ".kibouchi ." + keitai;//2.1を利用して表示するクラスを作成。
    $(".kibouchi option").hide();         //3.いったんセレクトボックスの値を非表示にする。
    $(".kibouchi").val("");               //4.セレクトボックスの値を削除
    $(kibouchi).show();                   //5.2で作成したクラスを表示する。
  });
})