phpとjavascriptでプルダウンを複数連動させる方法

前提・実現したいこと

PHPとhtmlで作成されている入力フォームのプルダウンをjavascriptを用いて、プルダウン同士を連動させたいです。
プルダウンが１つずつであれば問題なく動くのですが、連動させるプルダウンを複数とした場合、どのようにしたらいいかご教示いただけないでしょうか。よろしくお願いいたします。

該当のソースコード

このようにプルダウンが１つずつであれば動くのですが、このプルダウンを複数作成し連動させたいです。

php
1<?php
2	echo("
3		<body>
4		<form name=\"formName\" method=\"post\">
5		<select name = \"selectName1\" onChange=\"functionName()\">
6			<option value = \"果物\">くだもの</option>
7			<option value = \"野菜\">やさい</option>
8		</select>
9
10		<select name = \"selectName2\">
11		</select>
12
13		<script type = \"text/javascript\">
14		function functionName(){
15			var select1 = document.forms.formName.selectName1; 
16			var select2 = document.forms.formName.selectName2; 
17			select2.options.length = 0; 
18			if (select1.options[select1.selectedIndex].value == \"果物\"){
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				select2.options[0] = new Option(\"キャベツ\");
25				select2.options[1] = new Option(\"きゅうり\");
26				select2.options[2] = new Option(\"にんんじん\");
27				select2.options[3] = new Option(\"たまねぎ\");
28			}	
29		}
30		</script>
31		</body>
32	")
33?>

試したこと

htmlはfor文で複数作成し、それをjavascriptで連動させることを考えてますが、以下の方法はダメでした。どのようにしたらいいのでしょうか。

php
1<?php
2    echo("
3	<body>
4	<form name=\"formName\" method=\"post\">
5　　");
6
7for($ix=0;$ix<11;$ix=$ix+1){
8	echo("
9		<select name=\"selectName1[$ix]\" onChange=\"functionName()\">
10			<option value=\"果物\">くだもの</option>
11			<option value=\"野菜\">やさい</option>
12		</select>
13
14		<select name=\"selectName2[$ix]\">
15		</select>
16	");
17}
18
19for($ix=0;$ix<11;$ix=$ix+1){
20echo("
21	<script type=\"text/javascript\">
22	function functionName(){
23		var select1=document.forms.formName.selectName1[$ix];
24		var select2=document.forms.formName.selectName2[$ix];
25		select2.options.length=0;
26		if(select1.options[select1.selectedIndex].value == \"果物\"){
27			select2.options[0] = new Option(\"りんご\");
28			select2.options[1] = new Option(\"みかん\");
29			select2.options[2] = new Option(\"オレンジ\");
30		}
31		else if(select1.options[select1.selectedIndex].value == \"野菜\"){
32			select2.options[0] = new Option(\"キャベツ\");
33			select2.options[1] = new Option(\"きゅうり\");
34			select2.options[2] = new Option(\"ニンジン\");
35			select2.options[3] = new Option(\"たまねぎ\");
36		}
37	}
38	</script>
39");
40}
41
42echo("
43　　</body>
44");
45?>

補足情報（FW/ツールのバージョンなど）

htmlはfor文で複数作成を想定しております。phpのバージョンは5.6です。（サポートは切れてます？がもう少しこのバージョンを使用予定です）

m.ts10806

2019/01/24 00:14

コードはマークダウンのcode機能を利用してご提示ください。また、PHPのバージョンもご提示ください。

m.ts10806

2019/01/24 02:08

そもそもですが、JavaScriptによる処理そのものをPHP側で動的に組み立てるというかなりよろしくないやりかたを採用されています。 JSONなどで値だけ渡してJavaScriptで処理された方が良いです。

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

回答3件

関数名が。

投稿2019/01/23 17:10

退会済みユーザー

総合スコア0

ベストアンサー

PHP
1<script>
2window.addEventListener('DOMContentLoaded', function(){
3  var food={
4    "":[],
5    "果物":["りんご","みかん","オレンジ"],
6    "野菜":["キャベツ","きゅうり","ニンジン","たまねぎ"],
7  };
8  [].forEach.call(document.querySelectorAll('.s1'),function(x,y){
9    x.addEventListener('change',function(e){
10      var s2=document.querySelectorAll('.s2')[y];
11      s2.innerHTML="";
12      food[x.value].forEach(function(y){
13        var opt=document.createElement("option");
14        opt.value=y;
15        opt.textContent=y;
16        s2.appendChild(opt);
17      });
18    });
19  })
20});
21</script>
22<form name="formName" method="post">
23
24<?php
25for($ix=0;$ix<3;$ix=$ix+1){
26echo <<<eof
27<select name="selectName1[$ix]" class="s1">
28<option value="">--------</option>
29<option value="果物">くだもの</option>
30<option value="野菜">やさい</option>
31</select>
32<select name="selectName2[$ix]" class="s2">
33</select>
34eof;
35}
36?>
37</form>