MENU
Webコーディング（HTML/CSS/JavaScript）やEC-CUBEカスタマイズ、Webアプリなど
  1. ホーム
  2. プログラミング
  3. HTML/CSS/JavaScript
  4. 【JS】選択すると次のリストが変わる！連動プルダウンの作り方

【JS】選択すると次のリストが変わる！連動プルダウンの作り方

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

複数のプルダウン（ドロップダウンリスト）を連動させ、最初の選択に応じてその後の選択肢を変えていく方法を紹介します。

プルダウン2つ

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

プルダウン2つ ＋ 選択不可設定

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

プルダウン3つ

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

目次

プルダウン連動【2つ】

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);
    }
  });
});

プルダウン連動【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つ目の選択肢が変わるプルダウン。
基本的には【プルダウン2つ】と同じだが、使い回すコードは関数でまとめておく。

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をコピーしました！
目次