プルダウンデータ内の、所定の箇所を選択したい

Question

お世話になります。

https://try-m.co.jp/blog/web-create/936/

上記サイトを参考に、javascriptを用い、複数の連動したプルダウンを用意しています。
データのやり取りはPHPで行っており、プルダウンを連動させる部分だけ、上記サイトを参考にjavascriptの力を借りて実装しました。

上記サイトの場合、1つ目のプルダウンで関東を選択すれば、2つ目のプルダウンは、東京、千葉、埼玉、神奈川などのみ表示される仕組みになっています。

ここで質問なのですが、一度ポストで受け取ったデータを、選択のし直しなど、修正するため画面を戻した時、選択された状態（関東・東京で選択後ポストしたら、同じく関東・東京が選択された状態）にするにはどうしたら宜しいのでしょうか？

上記サイトにあるプルダウン自体は、直ぐに実装出来たわけですが、各プルダウンを選択し、他必要事項を入力して、登録前の確認画面で入力内容に誤りがあり、元の選択（入力）画面に戻ってくるという場面を想定したとき、javascriptの知識が乏しく、任意で選択した項目は選択された状態にすることが出来ません。

前述の通り、基本PHPで作っているため、プルダウンで選択したデータはPHPで取得し変数に入れる仕組みとしており、単純にPHPの変数に入っているデータからselectedとしてしまうと、2つ目のプルダウンに関東以外の項目も選択可能と、おかしくなってしまったりで・・・

お忙しいなか恐縮ですが、ご教示のほどお願い出来たら幸いです。
よろしくお願いいたします。

■現在のコード
プルダウンデータはDBから取得しているので、以下はHTML出力した際のもので、親カテゴリの「リフォーム（室内）」、子カテゴリの「壁紙（クロス）張替え」を選択し、POSTしたときのHTMLです。

PHP、およびSQL（create table、inseart文）を張り付けるべきか悩みましたが、長くなるのでHTMLを記載した次第です。

<select class="parent" name="m_cate" size="12">
<option value = "">選択してください</option>
<option value="1" class="py-1 border-top" selected>クリーニング</option>
<option value="2" class="py-1 border-top" >リフォーム（室内）</option>
<option value="3" class="py-1 border-top" >リフォーム（室外）</option>
<option value="4" class="py-1 border-top" >家電（設備）の取付け・修理</option>
<option value="5" class="py-1 border-top" >水道修理・メンテナンス</option>
</select>


<select class="children" name="s_cate" size="12" <?php echo $disabled; ?>>
<option value = "">選択してください</option>
<option value="1" data-val="1" class="py-1 border-top" >ハウスクリーニング</option>
<option value="2" data-val="1" class="py-1 border-top" >ルームクリーニング</option>
<option value="3" data-val="1" class="py-1 border-top" >エアコンクリーニング</option>
<option value="4" data-val="2" class="py-1 border-top"  selected>壁紙（クロス）張替え</option>
<option value="5" data-val="2" class="py-1 border-top" >クッションフロア張替え</option>
<option value="6" data-val="2" class="py-1 border-top" >フローリング張替え</option>
<option value="7" data-val="3" class="py-1 border-top" >外壁塗装・コーキング防水工事</option>
<option value="8" data-val="3" class="py-1 border-top" >屋根塗装・防水工事</option>
<option value="9" data-val="3" class="py-1 border-top" >屋根・防水修理</option>
<option value="10" data-val="4" class="py-1 border-top" >エアコン取付け・修理</option>
<option value="11" data-val="4" class="py-1 border-top" >温水洗浄便座取付け</option>
<option value="12" data-val="4" class="py-1 border-top" >アンテナ取付け</option>
<option value="13" data-val="5" class="py-1 border-top" >貯水槽清掃</option>
<option value="14" data-val="5" class="py-1 border-top" >水道水漏れ修理</option>
<option value="15" data-val="5" class="py-1 border-top" >排水管洗浄</option>
</select>

<INPUT type="hidden" name="index">
<INPUT type="hidden" name="step1">
<button type="submit" class="btn btn-warning text-white pl-5 pr-5">Submit</button>
</form>



<script>
<!--
var $children = $('.children');
var original = $children.html();

$('.parent').change(function() {

  var val1 = $(this).val();

  $children.html(original).find('option').each(function() {
    var val2 = $(this).data('val');
    if (val1 != val2) {
      $(this).not(':first-child').remove();
    }
  });

  if ($(this).val() == "") {
    $children.attr('disabled', 'disabled');
  } else {
    $children.removeAttr('disabled');
  }

});
-->
</script>

現状での不都合は、子カテゴリに「disabled」が設定されているため、子カテゴリのデータが選択されているときは「disabled」を外すことは出来るものの、親カテゴリと関連のない子データ、要は全てのデータが表示されてしまう状況です。

これを防ごうと子カテゴリのデータが存在する場合、テーブルからの子カテゴリの取得範囲を制限するも、PHPで行っているため、親カテゴリを変えると、子カテゴリが表示されない状況となってしまいます。

Comments

[m.ts10806]

現在のコードをご提示ください

[chapp]

コメントありがとうございます。
追記にて現在のコードを記載しました。
ご指導いただけたら幸いです。

Answer 1

画面の描画が終わってから、javascriptの親のchangeイベントを発火させればよいかと思います。

var $children = $('.children');
var original = $children.html();

$('.parent').change(function() {
--省略--
});

// 親のチェンジイベントを実行
$('.parent').trigger('change');
// 子を選択状態にする
// (子のselectのoptionを別オブジェクトとしてコピーして、連動した際の原本として利用しているので、
// 'selected'はoptionタグにベタ書きせずにコピーが終わってからjavascript側から付与する。）
$('.children').val('<?php echo $children_selected; ?>');
//$('.children').val('3');

Comments

[chapp]

storm3さん

ご親切なアドバイスをありがとうございます。
ソースまでご提示いただき感謝しています。

>画面の描画が終わってから

とは、プルダウンのソースを終えた後に設置するという認識で宜しかったでしょうか？
これまでjavascriptに無縁で、知識に乏しくて・・・

ご提示いただいたソースをプルダウン後に設置し、「省略」となっているところを、質問時に記載のjsの一部をはめ込み、動作確認としたところ、とても近い動きを得ることが出来ました！

しかし、現状では、POSTすると選択した子カテゴリ（children側）のソース上では「selected」となるものの、ブラウザ上では選択されていない状況となっています。

お忙しい中お手間を取らせてしまい申し訳ありませんが、引き続きご指導いただければ幸いです。
よろしくお願いいたします！

[storm3]

>とは、プルダウンのソースを終えた後に設置するという認識で宜しかったでしょうか？
あってます。javascriptが実行されてた時点で、まだブラウザが親selectと子selectの読み込みが終わっていないと、そのタグにjavascriptからアクセスできないよ。ぐらいのニュアンスです。
質問のソースにあるvar $children = $('.children');の段階で、すでに子selectにアクセスできているので描画が終わっているので気にしないでください。

想定している動きとしては
①PHP側で親selectには'selected'を付与しておき、子selectには'selected'を付与しない。
②子selectedはjavascript側で実行させるために、javascriptに値を設定しておく。
>$('.children').val('<?php echo $hoge; ?>');
↓ブラウザ処理
③javascriptで、親プルダウンのchangeイベントを実行する。
→親はselectedが付与されているので、子プルダウンが絞り込まれる
④子selectに'selected'を付与する
>$('.children').val('4'); ←PHP側で出力された子の選択値がjavascriptで選択された状態になる

>POSTすると選択した子カテゴリ（children側）のソース上では「selected」となるものの、ブラウザ上では選択されていない状況となっています。
$('.children').val()して'selected'が付いたけど、それが選択状態にならないとなると、javascriptエラーになっているか。selectedが複数付与されていて、他のものが選択させているかですかね。

[chapp]

storm3さん

お返事が遅れて申し訳ありません。
詳しいご説明の甲斐あって、$('.children').val('<?php echo $children_selected; ?>')
に値が代入されていなかったことに気が付きました。
ありがとうございます。無事、描いている動作を得ることが出来ました！