セレクトボックスのHTMLを教えてください

セレクトボックスの選択のHTMLと入力等の方法を教えてください
画像を拝見お願いします

大カテゴリーで　文学　と選択しましたら中小カテゴリーで文学１～６までを選択できるようにしたいです
他の医学、坊主も同じです

お願いします

No.3 回答者： Ogre7077 回答日時： 2017/12/11 18:35

1. すべてのセレクトボックスの HTML を書く

2. 最初に選ぶ大カテゴリ以外は非表示にする CSS を書く
3. 大カテゴリが変更されたら、対応する中カテゴリだけ表示し、その他を隠すイベントの JavaScript を書く
4. 中カテゴリが変更されたら、対応する小カテゴリだけ表示し、その他を隠すイベントの JavaScript を書く
5. 上位の変更イベントは、再帰的に下位まで伝達させる JavaScript を書く

No.2 回答者： yambejp 回答日時： 2017/12/11 09:25

こういったデータの持ち方をするか

var categories={
"文学":{
"文学1":["文学1-1","文学1-2","文学1-3"],
"文学2":["文学2-1","文学2-2","文学2-3"],
"文学3":["文学3-1","文学3-2","文学3-3"],
},
"医学":{
"医学1":["医学1-1","医学1-2","医学1-3"],
"医学2":["医学2-1","医学2-2","医学2-3"],
"医学3":["医学3-1","医学3-2","医学3-3"],
},
"坊主":{
"坊主1":["坊主1-1","坊主1-2","坊主1-3"],
"坊主2":["坊主2-1","坊主2-2","坊主2-3"],
"坊主3":["坊主3-1","坊主3-2","坊主3-3"],
},
};

親子関係のデータを返すサーバーサイドのプログラムを用意して
ajaxなどでデータをやりとりするのが妥当

No.1 回答者： fujillin 回答日時： 2017/12/09 22:33

こんにちは。

ご質問の内容はHTMLだけでは難しいですが、javascriptを用いることで実現可能です。

先人達がそのためのツール（ライブラリ）も数多く作成してくれていますので、その中の気に入ったものを利用なさるのが簡単かと思います。
「セレクト　連動」あたりをキーワードに検索するといろいろ見つかると思います。

以下は一例です。
http://www.skuare.net/test/jdependent.html