javascriptで動的に変えたセレクトボックスをPOST送信時、選択された状態で受け取りたい。

Question

お世話になります。
少々長いタイトルになってしまいましたが、PHPにてウェブアプリを作っているのですが、データ（MySQL）にカテゴリ登録された大カテゴリ、小カテゴリがあり、それを選択して登録する場面があります。

https://oni-on-design.com/2013/11/233

カテゴリの選択はセレクトボックスを選択して登録する流れを考えており、このセレクトボックスを動的に動かしたいと考え、上記サイトを参考にし、大カテゴリ、小カテゴリを呼び出す際にjavascript部を以下のような形で成形しています。

javascript部形成

$query = "SELECT b_cate_no, b_cate_name FROM ap_category_b ORDER BY b_cate_no";
$result = $mysqli->query($query);
$row_cnt = $result->num_rows;
if($row_cnt != 0){
	$i=0;

	$select_data = "<option value = \"\">選択してください</option>";

	while($row = $result->fetch_assoc()){

		$select_data_b[] = $row["b_cate_name"];

		if($row["b_cate_name"] == $b_cate_name){
			$selected = "selected";
		}else{
			$selected = "";
		}

		$select_data .= "<option value = \"".$row["b_cate_name"]."\" ".$selected.">".$row["b_cate_name"]."</option>";

		if($i==0){

			$js = "if(select1.options[select1.selectedIndex].value == \"".$row["b_cate_name"]."\"){\n";

		}
		else{

			$js .= "else if(select1.options[select1.selectedIndex].value == \"".$row["b_cate_name"]."\"){\n";

		}


		$b_cate_no = $row["b_cate_no"];


		$query2 = "SELECT m_cate_no, m_cate_b_no, m_cate_name, m_cate_sort FROM ap_category_m WHERE m_cate_b_no = '$b_cate_no' ORDER BY m_cate_no";
		$result2 = $mysqli->query($query2);
		$row_cnt2 = $result2->num_rows;

		if($row_cnt2 != 0){

			$js .= "select2.options[0] = new Option(\"選択してください\");\n";

			$h = 1;

			while($row2 = $result2->fetch_assoc()){

				$js .= "select2.options[".$h."] = new Option(\"".$row2["m_cate_name"]."\");\n";

				$h++;
			}
		}

		$js .= "}\n";
		$i++;
	}
}

javascript

<script type = "text/javascript">
<!--
function functionName()
    {
        var select1 = document.forms.formName.category_b; //変数select1を宣言
        var select2 = document.forms.formName.category_m; //変数select2を宣言
         
        select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要

<?php echo $js; ?>

    }
 
//-->
</script>

HTML部

<!--選択肢その1-->
<select name = "category_b" onChange="functionName()" style="height:35px;">
<?php echo $select_data; ?>
</select>
<!--選択肢その2（選択肢その1の項目によって変化）-->
<select name = "category_m">
</select>

とここで質問です。
2つある選択肢ですが、POSTで送信（自身に送信して受け取っている）したとき、それぞれのセレクトボックスは選択された状態にしたいと考えており、選択肢その１は問題ないものの、、選択肢その２（category_m）は選択された状態にならないばかりか、選択肢その1を再度選択する必要がある状態で、また、これらを登録し、データを呼び出した際の修正画面を想定したときも、選択肢その１、選択肢その2、それぞれが登録された値に選択された状態としたいと考えていますが、受け取った値（変数にある値）をどのように組み込めば、選択された状態となるのでしょうか？

お忙しい中恐縮ですが、アドバイスのほど頂戴できれば幸いです。
よろしくお願いいたします。

Answer 1

「javascript部形成」部で、
選択された値に応じてoptionタグにselectedを持たせるようにすればいいんじゃないかと思ったけど、
あるいはページ読み終わり後に実行するjavascriptブロックを想定して、
そこから該当箇所を選択状態にするDOM操作をするとか。

掲載していおるソースだと、
親要素はphpで生成、子要素孫要素はjsで生成ってやってるけど、
どっちかに統一した方が扱いやすそう。
jsで動的にレンダリングせずとも、
phpで全部生成しておいてjsで非表示のコントロールだけしちゃうのも手ではある。
（htmlが重くなるけども。）

Comments

[chapp]

m6uさん

お忙しい中でのアドバイス、ありがとうございます。

> jsで動的にレンダリングせずとも、
> phpで全部生成しておいてjsで非表示のコントロールだけしちゃうのも手ではある。

このあたりのこと、もう少し詳しく教えていただけますか？
もちろん、詳しく説明のあるサイトをご紹介いただいても構いません。

私自身、javascriptのこと触りたてのようなレベルで、

> どっちかに統一した方が扱いやすそう。

と、貴重なアドバイスと思いながらも、具体的に次へのステップが踏めない状態です。

ご指導いただければ幸いです。
よろしくお願いいたします。

[退会済みユーザー]

親select、子select、孫selectをphpでhtml出力させておきつつ、
ページ読み込み後に実行するjsで
必要のないselectを非表示（スタイルシートでdisplay:none）にする、
親要素選択状態に応じて必要な子要素のみ表示する、
同様に子要素に応じて孫要素も。
selectのonchangeイベントで表示非表示を操作するjsを呼ぶ、
みたいな書き方で通じますかね？

[chapp]

m6uさん

お忙しい中、早々のお返事をありがとうございます。
PCの前から離れていたので、すぐにお礼出来ませんでした。すみません。

・必要のないselectを非表示（スタイルシートでdisplay:none）にする
・selectのonchangeイベントで表示非表示を操作するjsを呼ぶ、

は別々の方法という認識で宜しかったでしょうか？スタイルシートで非表示にするとは、ぼんやりですがイメージは出来るものの、javascriptの知識がないので、質問させていただきました。

お忙しいところ恐縮いたします。
よろしくお願いいたします。

[退会済みユーザー]

関係するselectには必ずidを降っておきます。その方がDOM操作しやすいので。
３階層の考え方が難しければテストで２段階のを考えましょう。
親selectの１番めに連動する子select、２番めに連動する子select、ってphpコード上で機械的に生成するようにして、
選択状態に関係ない子selectはdisplay:noneしておくというのが一つ。
各selectのonchangeイベントで表示非表示を調整するjsでの処理を定義しておいて、
getElementByIdとか使えば非表示のコントロール対象を探し当てられます。
[JavaScriptでgetElementByIdを使う方法！HTML要素を取得する \| TechAcademyマガジン](https://techacademy.jp/magazine/15289)
getElemntByIdなら、引数の文字列を機械生成時のルールで子selectを指定できます。

[chapp]

m6uさん

お忙しい中、早速のお返事ありがとうございます。
このご説明だけで「理解できました！」とはなりませんが、このご説明を元に調べてみます。

改めて必ずやご報告い致します。
取り急ぎ、ありがとうございました。

[chapp]

m6uさん

お世話になっております。ただいま勉強中ですが、時間を要してしまいそうなので、ひとまずここは解決済みとさせていただきます。

要点をいただけるのは大変助かります。
ありがとうございました。