JavaScriptとCSSを使って、ドロップダウンリスト（プルダウン）の選択肢を変える方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！
ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。
目次
実装例（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);
}
});
});