MENU
Webコーディング（HTML/CSS/JavaScript）やEC-CUBEカスタマイズ、Webアプリなど
  1. ホーム
  2. プログラミング
  3. HTML/CSS/JavaScript
  4. 【JavaScript】条件に合わせてプルダウンの選択肢を変える

【JavaScript】条件に合わせてプルダウンの選択肢を変える

HTML/CSS/JavaScript
選択によって次の選択肢が変わるJavaScript

JavaScriptとCSSを使って、ドロップダウンリスト（プルダウン）の選択肢を変える方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！

目次

実装例（3つ）

シンプル

大分類の選択に応じて小分類の選択肢が変化する。

選択不可設定

大分類が選択されていない場合（「選択してください」になっている場合）は小分類が選択できない。

複数プルダウン

大分類の選択に応じて小分類の選択が変わり、さらに小分類の選択に応じて商品が変わる。
また、大分類や小分類の選択が変わるとそれ以下の選択肢も変わり、選択がリセットされる

シンプル実装

2つのプルダウンを実装する場合。1つ目の選択に応じて2つ目の選択肢が変化する。

HTML/CSS/JavaScript コードはこちら
<div class="input-block">
  <div class="select-block">
    <label>大分類：
      <select id="category-select-1">
        <option>選択してください</option>
      </select>
    </label>
  </div>
  <div class="select-block">
    <label>小分類：
      <select id="sub-category-select-1">
        <option>選択してください</option>
      </select>
    </label>
  </div>
</div>
  • プルダウンの中身はJavaScriptで設定する。
.input-block {
  display: flex;
  flex-direction: column;
}

.select-block {
  margin-bottom: 16px;
}

select, label {
  height: 32px;
  font-size: 14px;
}
// 大分類、小分類の選択肢を配列でそれぞれ用意
const categories = [
  'エコグッズ',
  '衛生グッズ',
  '防災グッズ'
];

// 小分類は、大分類と紐付けるためにオブジェクト型を使う
const subCategories = [
  {category: 'エコグッズ', name: '天然素材'},
  {category: 'エコグッズ', name: 'リサイクル素材'},
  {category: '衛生グッズ', name: 'マスク'},
  {category: '衛生グッズ', name: '除菌'},
  {category: '防災グッズ', name: 'セット物'},
  {category: '防災グッズ', name: 'ライト'}
];

const categorySelect1 = document.getElementById('category-select-1');
const subCategorySelect1 = document.getElementById('sub-category-select-1');

// 大分類のプルダウンを生成
categories.forEach(category => {
  const option = document.createElement('option');
  option.textContent = category;

  categorySelect1.appendChild(option);    
});

// 大分類が選択されたら小分類のプルダウンを生成
categorySelect1.addEventListener('input', () => {

  // 小分類のプルダウンをリセット
  const options = document.querySelectorAll('#sub-category-select-1 > option');
  options.forEach(option => {
    option.remove();
  });

  // 小分類のプルダウンに「選択してください」を加える
  const firstSelect = document.createElement('option');
  firstSelect.textContent = '選択してください';
  subCategorySelect1.appendChild(firstSelect);

  // 大分類で選択されたカテゴリーと同じ小分類のみを、プルダウンの選択肢に設定する
  subCategories.forEach(subCategory => {
    if (categorySelect1.value == subCategory.category) {
      const option = document.createElement('option');
      option.textContent = subCategory.name;
      
      subCategorySelect1.appendChild(option);
    }
  });
});

1つ目が選ばれていないと2つ目が選択できない実装

前述の【シンプル】に、「1つ目が選択されていないと2つ目がクリックできない」ようにする設定を追加。

HTML/CSS/JavaScript コードはこちら
<div class="input-block">
  <div class="select-block">
    <label>大分類：
      <select id="category-select-2">
        <option>選択してください</option>
      </select>
    </label>
  </div>
  <div class="select-block">
    <label>小分類：
      <select id="sub-category-select-2" disabled>
        <option>選択してください</option>
      </select>
    </label>
  </div>
</div>
  • プルダウンの中身はJavaScriptで設定する。
  • 2つ目の選択肢（selectタグ）にdisabled属性を追加。
.input-block {
  display: flex;
  flex-direction: column;
}

.select-block {
  margin-bottom: 16px;
}

select, label {
  height: 32px;
  font-size: 14px;
}
// 大分類、小分類の選択肢を配列でそれぞれ用意
const categories = [
  'エコグッズ',
  '衛生グッズ',
  '防災グッズ'
];

// 小分類は、大分類と紐付けるためにオブジェクト型を使う
const subCategories = [
  {category: 'エコグッズ', name: '天然素材'},
  {category: 'エコグッズ', name: 'リサイクル素材'},
  {category: '衛生グッズ', name: 'マスク'},
  {category: '衛生グッズ', name: '除菌'},
  {category: '防災グッズ', name: 'セット物'},
  {category: '防災グッズ', name: 'ライト'}
];

const categorySelect2 = document.getElementById('category-select-2');
const subCategorySelect2 = document.getElementById('sub-category-select-2');

// 大分類のプルダウンを生成
categories.forEach(category => {
  const option = document.createElement('option');
  option.textContent = category;

  categorySelect2.appendChild(option);    
});

// 大分類が選択されたら小分類のプルダウンを生成
categorySelect2.addEventListener('input', () => {

  // 小分類のプルダウンをリセット
  const options = document.querySelectorAll('#sub-category-select-2 > option');
  options.forEach(option => {
    option.remove();
  });

  // 小分類のプルダウンに「選択してください」を加える
  const firstSelect = document.createElement('option');
  firstSelect.textContent = '選択してください';
  subCategorySelect2.appendChild(firstSelect);

  // 小分類を選択（クリック）できるようにする
  subCategorySelect2.disabled = false;

  // 大分類が選択されていない（「選択してください」になっている）とき、小分類を選択（クリック）できないようにする
  if (categorySelect2.value == '選択してください') {
    subCategorySelect2.disabled = true;
    return;
  }

  // 大分類で選択されたカテゴリーと同じ小分類のみを、プルダウンの選択肢に設定する
  subCategories.forEach(subCategory => {
    if (categorySelect2.value == subCategory.category) {
      const option = document.createElement('option');
      option.textContent = subCategory.name;
      
      subCategorySelect2.appendChild(option);
    }
  });
});

プルダウンを3段階で作る

1つ目の選択で2つ目の選択肢が変わり、2つ目の選択で3つ目の選択肢が変わるプルダウン。
基本的には【シンプル】と同じだが、使い回すコードは関数でまとめておく。

HTML/CSS/JavaScript コードはこちら
<div class="input-block">
  <div class="select-block">
    <label>大分類：
      <select id="category-select-3">
        <option>選択してください</option>
      </select>
    </label>
  </div>
  <div class="select-block">
    <label>小分類：
      <select id="sub-category-select-3" disabled>
        <option>選択してください</option>
      </select>
    </label>
  </div>
  <div class="select-block">
    <label>商品名：
      <select id="product-select" disabled>
        <option>選択してください</option>
      </select>
    </label>
  </div>
</div>
  • プルダウンの中身はJavaScriptで設定する。
  • 2つ目と3つ目の選択肢（selectタグ）にdisabled属性を追加。
.input-block {
  display: flex;
  flex-direction: column;
}

.select-block {
  margin-bottom: 16px;
}

select, label {
  height: 32px;
  font-size: 14px;
}
// 大分類、小分類、商品名の選択肢を配列でそれぞれ用意
const categories = [
  'エコグッズ',
  '衛生グッズ',
  '防災グッズ'
];

// 小分類と商品名は、それぞれ一つ前の選択肢と紐付けるためにオブジェクト型を使う
const subCategories = [
  {category: 'エコグッズ', name: '天然素材'},
  {category: 'エコグッズ', name: 'リサイクル素材'},
  {category: '衛生グッズ', name: 'マスク'},
  {category: '衛生グッズ', name: '除菌'},
  {category: '防災グッズ', name: 'セット物'},
  {category: '防災グッズ', name: 'ライト'}
];

const products = [
  {subCategory: '天然素材', name: 'バンブーマグカップ'},
  {subCategory: '天然素材', name: 'リユースコーヒータンブラー'},
  {subCategory: 'リサイクル素材', name: 'リサイクルコットンバッグ'},
  {subCategory: 'リサイクル素材', name: '再生PETブランケット'},
  {subCategory: 'マスク', name: '不織布マスク'},
  {subCategory: 'マスク', name: 'ウレタンマスク'},
  {subCategory: '除菌', name: '除菌スプレー'},
  {subCategory: '除菌', name: '除菌ウェットティッシュ'},
  {subCategory: 'セット物', name: '防災10点セット'},
  {subCategory: 'セット物', name: '防災20点セット'},
  {subCategory: 'ライト', name: 'LED電灯'},
  {subCategory: 'ライト', name: 'ランタン'}
];

// 「選択してください」というプルダウンの選択肢を作成する関数
function firstOption() {
  const first = document.createElement('option');
  first.textContent = '選択してください';

  return first;
}

// 引数に指定されたノードをすべて削除する関数
function optionClear(node) {
  const options = document.querySelectorAll(node);
  options.forEach(option => {
    option.remove();
  });
}

const categorySelect3 = document.getElementById('category-select-3');
const subCategorySelect3 = document.getElementById('sub-category-select-3');
const productSelect = document.getElementById('product-select');

// 大分類のプルダウンを生成
categories.forEach(category => {
  const option = document.createElement('option');
  option.textContent = category;

  categorySelect3.appendChild(option);    
});

// 大分類が選択されたら小分類のプルダウンを生成
categorySelect3.addEventListener('input', () => {

  // 小分類のプルダウンを「選択してください」のみにし、選択（クリック）できるようにする
  optionClear('#sub-category-select-3 > option');
  subCategorySelect3.appendChild(firstOption());
  subCategorySelect3.disabled = false;

  // 商品のプルダウンを「選択してください」のみにし、選択（クリック）できないようにする
  optionClear('#product-select > option');
  productSelect.appendChild(firstOption());
  productSelect.disabled = true;

  // 大分類が選択されていない（「選択してください」になっている）とき、小分類を選択（クリック）できないようにする
  if (categorySelect3.value == '選択してください') {
    subCategorySelect3.disabled = true;
    return;
  }

  // 大分類で選択されたカテゴリーと同じ小分類のみを、プルダウンの選択肢に設定する
  subCategories.forEach(subCategory => {
    if (categorySelect3.value == subCategory.category) {
      const option = document.createElement('option');
      option.textContent = subCategory.name;
      
      subCategorySelect3.appendChild(option);
    }
  });
});

// 小分類が選択されたら商品のプルダウンを生成
subCategorySelect3.addEventListener('input', () => {
  
  // 商品のプルダウンを「選択してください」のみにし、選択（クリック）できるようにする
  optionClear('#product-select > option');
  productSelect.appendChild(firstOption());
  productSelect.disabled = false;
  
  // 小分類が選択されていない（「選択してください」になっている）とき、商品を選択（クリック）できないようにする
  if (subCategorySelect3.value == '選択してください') {
    productSelect.disabled = true;
    return;
  }
  
  // 小分類で選択されたカテゴリーと同じ商品のみを、プルダウンの選択肢に設定する
  products.forEach(product => {
    if (subCategorySelect3.value == product.subCategory) {
      const option = document.createElement('option');
      option.textContent = product.name;
  
      productSelect.appendChild(option);
    }
  });
});
HTML/CSS/JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次