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

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

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

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例(3つ)

シンプル

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

選択不可設定

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

複数プルダウン

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

シンプル実装

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

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次