複数のselectで1つを選択したら他の選択をキャンセルする

どうもこんにちは。
Web/App/UIデザイナーのサトウです。

今回は、複数のselectで1つを選択したら他の選択をキャンセルするコードを紹介します。

タイトル用に短くまとめたのでちょっとわかりづらいんですが、複数あるselectのうち、1つのselectで値を選択したら、それ以外のselectを未選択の状態にリセットする（選択をキャンセルする）という動きです。

具体的にはデモをご覧ください。

デモ

See the Pen
Untitled by foolishlife (@foolishlife)
on CodePen.

ご覧のとおり、1つのselectに値が入ると他のselectの値がリセットされます。
かつ、影響し合うのは指定したグループ内にあり指定のclassが付いたselectのみです。

html

ポイントは下記2点です。

この処理を適用したいselectにclass「only-select」を付けておく。
→対象を指定。
影響を与え合いたいselectはclass「select-group」を付けた要素で囲んでおく。
→影響し合う範囲を指定。

もちろん、class名は上記のとおりでなく任意のものでかまいません。

<form action="">
  <h2>グループ01</h2>
  <div class="select-group" id="group01">
    <div>
      <select name="select0101" id="select-01-01" class="only-select">
        <option value="" selected="selected">グループ01のselect01</option>
        <option value="value-01-01-a">選択肢01-01-A</option>
        <option value="value-01-01-b">選択肢01-01-B</option>
        <option value="value-01-01-c">選択肢01-01-C</option>
        <option value="value-01-01-d">選択肢01-01-D</option>
        <option value="value-01-01-e">選択肢01-01-E</option>
      </select>
    </div>
    <div>
      <select name="select0102" id="select-01-02" class="only-select">
        <option value="" selected="selected">グループ01のselect02</option>
        <option value="value-01-02-a">選択肢01-02-A</option>
        <option value="value-01-02-b">選択肢01-02-B</option>
        <option value="value-01-02-c">選択肢01-02-C</option>
        <option value="value-01-02-d">選択肢01-02-D</option>
        <option value="value-01-02-e">選択肢01-02-E</option>
      </select>
    </div>
    <div>
      <select name="select0103" id="select-01-03" class="only-select">
        <option value="" selected="selected">グループ01のselect03</option>
        <option value="value-01-03-a">選択肢01-03-A</option>
        <option value="value-01-03-b">選択肢01-03-B</option>
        <option value="value-01-03-c">選択肢01-03-C</option>
        <option value="value-01-03-d">選択肢01-03-D</option>
        <option value="value-01-03-e">選択肢01-03-E</option>
      </select>
    </div>
  </div>

  <h2>グループ02</h2>
  <div class="select-group" id="group02">
    <div>
      <select name="select0201" id="select-02-01" class="only-select">
        <option value="" selected="selected">グループ02のselect01</option>
        <option value="value-02-01-a">選択肢02-01-A</option>
        <option value="value-02-01-b">選択肢02-01-B</option>
        <option value="value-02-01-c">選択肢02-01-C</option>
        <option value="value-02-01-d">選択肢02-01-D</option>
        <option value="value-02-01-e">選択肢02-01-E</option>
      </select>
    </div>
    <div>
      <select name="select0202" id="select-02-02" class="only-select">
        <option value="" selected="selected">グループ02のselect02</option>
        <option value="value-02-02-a">選択肢02-02-A</option>
        <option value="value-02-02-b">選択肢02-02-B</option>
        <option value="value-02-02-c">選択肢02-02-C</option>
        <option value="value-02-02-d">選択肢02-02-D</option>
        <option value="value-02-02-e">選択肢02-02-E</option>
      </select>
    </div>
  </div>
</form>

jQuery

jQueryの「.val()」を使ってselectの値を取得し、その値次第で振る舞わせます。
jQueryはバージョン1.x以降どのバージョンでも動作します。

$(window).on('load', function () { // ウインドウが読み込まれたら処理開始
  $('.only-select').change(function () { // .only-selectが操作されたら処理開始
    var selectVal = $(this).val(); // 変数 selectVal を定義
    var parentIdValue = $(this).parents('.select-group').attr('id'); // 値が選択されたselectの親の中からclass名「select-group」のついているものを見つけ、そのidの文字列を取得
    var parentId = '#' + parentIdValue; // 取得したid文字列の先頭に「#」を付与
    if (!selectVal == '') { // もし selectVal が空じゃなかったら処理開始
      var others = $(parentId).find('.only-select').not(this); // 「自分以外」を定義
      $(others).css({ // parentIdの中から.only-selectを見つけ、その中のthis以外にcssを適用
        'opacity': 0.3,
      });
      $(others).val(''); // parentIdの中から.only-selectを見つけ、その中のthis以外の値を空にする
      $(this).css('opacity', 1);
    } else { // もし selectVal が空だったら処理開始
      $(parentId).find('.only-select').css({ // parentIdの中にあるすべての.only-selectにcssを適用
        'opacity': 1,
      });
    }
  });
});