セレクトボックスを連動させて表示させる方法

Question

データベースの情報：
id,name,level,parent_id
10,レディース,1,-
11,メンズ,1,-
1010,トップス,2,10
1110,パンツ,2,11
101010,Tシャツ,3,1010
101011,ブラウス,3,1010
111010,ポロシャツ,3,1110

セレクトボックスを3つ用意し、1つ目のボックスが選択されたら
２つめのボックスの選択肢は１つめの子要素のみとなるようにしたいです。
同様に2つ目の要素が選択されたらその子要素が選択肢として3つ目のボックスに表示させます。
例えば、１つめレディースと選択されれば、
２つめのボックスはparent_idが10であるトップスが選択肢として表示される動きです。
※1つ目のボックスはlevelが1、2つ目はlevelが2の要素のみを表示します。

このような動きを、CSSで実現することは可能でしょうか？
JQueryなどを使う必要がありますか？
CSSで実現可能でしたら、方法をご教授いただきたいです。

Answer 1

データベースがからむようでしたら
他の方のおすすめのJqueryとAjax(PHP+database)でサンプルをゲットしてください。

[jQuery+PHP] Ajax で連動プルダウンを作る方法と高速化

Lalabelとなるとまた少しニュアンスが異なりますが。
まずは、フレームワークを使いわない方法で理解されたほうがよいと思ったりします。

Comments

[JsoHaya]

たしかにこの動きに関してはLaravelは関係ないですね。
ご回答ありがとうございました！

[mako1972]

PHP+mysqlで取得したデータをJson形式で取得して
javascriptで処理するサンプルが結構あるようです。

jqueryもいいのですが、vue.jsがお勧めです。

[mako1972]

>>たしかにこの動きに関してはlaravelは関係ないですね。
LalavelのDatabaseモデルと関係するのでは？
という意味です。
lalavelとvue.jsは標準の組み合わせなのかサンプルが多そうですね。

[JsoHaya]

詳しくご説明いただきありがとうございます！
vue.jsかreact.jsで迷っていましたが、vue.jsで進めてみます

[mako1972]

すでに解決ずみだと思いながら老婆心で情報だけ提示させていただきますね。

大阪学園コード
https://www.youtube.com/watch?v=rfZfrNmIiJk&list=PLkQpCfbvj0lwds9oPsRRrFp1ZxTGyueqv

Vue.js入門 #01（たにぐちまこと）：
https://www.youtube.com/watch?v=cL3Al628mLE&list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW

udemy vue.js講座（セールを待つと1500円以内で講座を購入できます）
https://www.udemy.com/ja/topic/vue-js/

[mako1972]

Qiite 連動するプルダウンリストをVue.jsを使って実装する ( with PHP )

https://qiita.com/niisan-tokyo/items/7d15716304c492f244c2

[mako1972]

2つのセレクトボックスが連動するVue.jsのサンプル
https://www.gesource.jp/weblog/?p=8417

この辺で失礼いたします。

[JsoHaya]

とても丁寧に教えていただきありがとうございます。
参考にさせていただきます。本当にありがとうございます

Answer 2

この動きはさすがにCSSでは実現できないと思います。

これだけのためだけであればjQueryは必須ではないと思いますが、
jQueryを使って書けば、ググった時に事例がたくさん見つかるのでおすすめです。

Comments

[JsoHaya]

ご回答ありがとうございます。
CSSでできないとわかればJSでなんとかできるようにしてみます。