【サンプル付き】JavaScriptで下限に応じた上限連動セレクトボックスの実装

JavaScriptで下限の選択に応じて上限を自動制御する連動セレクトボックスの実装方法を簡単に紹介します。

Contents

サンプルコード
仕様
コード
- 1. HTML構造の作成
- 2. JavaScript
なぜ下限なし・上限なしのvalueに-1を使うのか？
おわりに

サンプルコード

以下のCodePen埋め込みから実際に動いている例を確認できます。

サンプルコードは土地探し検索フォームの一部と想定し、探したい土地の面積範囲を設定するものとします。

See the Pen js-selectbox-dynamic-range by POSIPAN (@posipan) on CodePen.

仕様

下限値の選択によって、上限値の選択肢が動的に制御される
下限値以下の上限選択肢は無効化（disabled）される
下限なし・上限なしの値にも対応
下限を設定後、上限が下限を下回っている場合は「選択してください」にリセットする

コード

CSSは文字サイズ変更程度なので省きます。

1. HTML構造の作成

シンプルな構造で、下限と上限を選択する2つのセレクトボックスを配置します。

<p>探したい土地の面積を指定してください。</p>
<div>
  <select name="land_lower_size">
    <option value="">選択してください</option>
    <option value="50">50㎡</option>
    <option value="100">100㎡</option>
    <option value="150">150㎡</option>
    <option value="-1">下限なし</option>
  </select>
  <span>〜</span>
  <select name="land_upper_size">
    <option value="">選択してください</option>
    <option value="50">50㎡</option>
    <option value="100">100㎡</option>
    <option value="150">150㎡</option>
    <option value="-1">上限なし</option>
  </select>
</div>

2. JavaScript

jQueryを使わず、JavaScriptのみで実装しています。詳細はコードのコメントに記載しています！

// 下限に応じて上限セレクトボックスを制御する関数
const updateUpperSelect = (lowerSelect, upperSelect) => {
  const lowerValue = parseInt(lowerSelect.value, 10); // 下限の値を数値に変換
  const upperValue = parseInt(upperSelect.value, 10); // 上限の値を数値に変換
  const upperOptions = upperSelect.options; // 上限セレクトの全オプションを取得

  // 一旦すべてのオプションを有効化する
  for (let option of upperOptions) {
    option.disabled = false;
  }

  // 下限が選択されている場合、無効化すべき上限オプションを制御（"-1"は無効化しない）
  if (!isNaN(lowerValue) && lowerValue !== -1) {
    for (let option of upperOptions) {
      const optionValue = parseInt(option.value, 10);
      if (!isNaN(optionValue) && optionValue !== -1 && optionValue <= lowerValue) {
        option.disabled = true;
      }
    }
  }

  // 下限と上限の整合性をチェックして不正ならリセット
  if (!isNaN(lowerValue) && !isNaN(upperValue) && upperValue !== -1) {
    if (lowerValue >= upperValue) {
      upperSelect.value = ""; // 「選択してください」にリセット
    }
  }
};

// セレクトボックスを取得
const landLowerSelect = document.querySelector('select[name="land_lower_size"]');
const landUpperSelect = document.querySelector('select[name="land_upper_size"]');

// イベントハンドラを定義（両セレクトの変更時に実行）
const onChangeHandler = () => updateUpperSelect(landLowerSelect, landUpperSelect);

// イベントリスナーを登録
landLowerSelect.addEventListener('change', onChangeHandler);
landUpperSelect.addEventListener('change', onChangeHandler);

// ページ読み込み時にも初期同期を実施
onChangeHandler();