javascriptで三段階の絞り込み検索をやりたい。

自分はプルダウンのjavascriptで絞り込み検索というものをやっております。2段階の絞り込み検索には成功しましたが、3段階の絞り込み検索はどうやればできるのでしょうか。たとえば食べ物を選択すると果物か野菜か肉類が出て、果物を選択するとリンゴやミカンやイチゴが出てくるモノを作りたいです。
以下はソースです。

m.ts10806

2019/01/12 06:16

二段ができて三段ができない理由がわからないですね。そろそろマークダウンでコード提示いただけませんか？でないと正しく再現確認できないんですよね。質問読む気を削ぐコードの提示の仕方です。まともな回答要らないてなら別にこのままでもいいですけど、ほとんどの質問未解決のまま進まれるのは荒らし行為と同等です。やめてください。

think49

2019/01/15 09:58

重複質問。 https://teratail.com/questions/168322 https://teratail.com/questions/168324 https://teratail.com/questions/168564

think49

2019/01/15 09:59

マルチポスト。 https://ja.stackoverflow.com/questions/51986/javascript-%E7%B5%9E%E3%82%8A%E8%BE%BC%E3%81%BF%E6%A4%9C%E7%B4%A2-%E4%B8%89%E6%AE%B5%E9%9A%8E%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 https://teratail.com/help#posted-otherservice

行動規範の内容に同意します

回答1件

長いので省略して大阪府だけ3段階目まで選べるようにしました。

HTML
1<script type = "text/javascript">
2function functionName() {
3	var select1 = document.forms.formName.selectName1; //変数select1を宣言
4	var select2 = document.forms.formName.selectName2; //変数select2を宣言
5	var select3 = document.forms.formName.selectName3; //変数select3を宣言
6
7	select3.options.length = 0;
8	
9	if (select2.selectedIndex < 0) {
10		select2.options.length = 0;
11		if (select1.options[select1.selectedIndex].value == "大阪府")
12		{
13			select2.options[0] = new Option("堺市堺区");
14			select2.options[1] = new Option("堺市中区");
15		}
16
17		else if (select1.options[select1.selectedIndex].value == "兵庫県")
18		{
19			select2.options[0] = new Option("神戸市東灘区");
20			select2.options[1] = new Option("神戸市灘区");
21			select2.options[2] = new Option("堺市中央区");
22		}
23		else if (select1.options[select1.selectedIndex].value == "奈良県")
24		{
25			select2.options[0] = new Option("奈良市");
26			select2.options[1] = new Option("生駒市");
27		}
28		else if (select1.options[select1.selectedIndex].value == "京都府")
29		{
30			select2.options[0] = new Option("下京区");
31			select2.options[1] = new Option("中京区");
32			select2.options[2] = new Option("上京区");
33		}
34		else if (select1.options[select1.selectedIndex].value == "肉類")
35		{
36			select2.options[0] = new Option("豚肉");
37			select2.options[1] = new Option("牛肉");
38		}
39	} else {
40	
41		if (select2.options[select2.selectedIndex].value == "堺市堺区")
42		{
43			select3.options[0] = new Option("堺市堺区A");
44			select3.options[1] = new Option("堺市堺区B");
45		} else if (select2.options[select2.selectedIndex].value == "堺市中区")
46		{
47			select3.options[0] = new Option("堺市中区A");
48			select3.options[1] = new Option("堺市中区B");
49		}
50	}
51} 
52</script>
53
54<body bgcolor onLoad="functionName()">
55	<form name="formName" method="post" action="./pathToProgramFile">
56		<!--選択肢その1-->
57		<select name = "selectName1" onChange="functionName()">
58			<option value = "選択されていません">選択されていません</option>
59			<option value = "大阪府">大阪府</option>
60			<option value = "兵庫県">兵庫県</option>
61			<option value = "奈良県">奈良県</option>
62			<option value = "京都府">京都府</option>
63			<option value = "肉類">にくるい</option>
64		</select>
65
66		<!--選択肢その2（選択肢その1の項目によって変化）-->
67		<select name = "selectName2" onChange="functionName()">
68		</select>
69		<select name = "selectName3" >
70		</select>
71	</form>
72</body>

大分質問文も良くなったと思いますが、mts10806さんやほかの質問でも指摘されている通りコードは「```」でくくって、上記のように見やすくしないと回答が来づらいです。
コードを載せられたのも素晴らしいですが、これではまだ「３段階目の検索機能を作ってくれ」という丸投げの依頼にしか見ません。「３段階目を作るためにこういうコードを書いたけど、こういうエラーが出て動かなかった。どうすればいいですか」となって初めて質問になってるといえると思います。

私の記載したコードはsembokuloveさんの書かれたコードの多くの課題が残ったままになっていると思います。
４段階目はどうするのか、冗長な箇所が無いか、選択肢の追加や更新が大変じゃないか、などなど
質問文からはこれ以上の仕様は読み取れず私の力では解決できなかったため、ここからの改良はsembokuloveさんが頑張っていただければと思います。

また、未解決のままほったらかしにしてる質問も解決したのであれば自己解決方法を記入し、同じ質問を繰り返してしまったのであれば削除依頼をだすなりしたほうがいいと思います。

投稿2019/01/12 08:30

編集2019/01/12 09:09