動的にoptionが変わるセレクトボックスを作成し、POST送信された後も選択された値を保持したい

Question

やりたいこと

動的にoptionの内容が変化するセレクトボックスを用意し、POST送信されても選択された値を保持したいです。開発環境はFuelPHP(1.8.2)です。

試したこと

次の動画で具体例を示します。選択した「種類」によって「食品」に表示する項目が動的に変化するようにしています。

確認ボタンでPOST送信したあと、PHPで項目を設定した「種類」フィールドの値は保持できました。一方、javaScriptで項目を設定した「食品」フィールドは値が保持できません（バナナを保持したいのに、にんじんに初期化されてしまいます）。

現在の方針と懸念事項

「種類」フィールドの内容は固定するためPHP処理で内容を設定しています。一方、「食品」フィールドは「種類」が変更されたことを検知して内容を変えたいため、javaScriptで制御しようと考えました。

しかし、「食品」の値をjavaScriptで定義し、POST送信された時にフォームをrepopulate()するという流れでは、「食品」の値を保持するのが難しいのかもしれないと感じています。

質問（相談）

POST送信された後も選択された値を保持するためには、どのように実装すれば良いでしょうか？

具体的な方法ではなくとも、大まかな流れについてのご意見や、上述の方針に対するご指摘をいただけると助かります。

コード

コントローラ

<?php

class Controller_Home extends Controller
{
  public function action_index()
  {
    // 条件入力フォームを作成
    $form = Fieldset::forge('sample');

    // 種類を選択するセレクトボックス
    $opts = array('1' => '1:野菜', '2' => '2:果物');
    $form->add('type', '種類', array('type' => 'select'))
      ->set_options($opts);
        
    // 種類によって内容が変わるセレクトボックス
    $form->add('food', '食品', array('type' => 'select'));

    $form->add('submit', '', array('type' => 'submit', 'value' => '確認'));
    
    if (Input::method() === 'POST')
    {
      $form->repopulate();
    }

    // ビューを生成
    $view = View::forge('home');
    $view->set_global('form', $form->build(''), false);
    return $view;
  }
}

ビュー

<?php echo $form; ?>
  
<?php echo Asset::js('jquery.min.js'); ?>
<?php echo Asset::js('main.js'); ?>

javaScript

$(function(){
  // 初期処理
  if($('#form_food').val() === null){
    set_options('1'); // 空の場合は野菜のoptionを設定
  }
  
  // 種類フィールドが変更された時の処理
  $('#form_type').change(function(){
    var type = $(this).val(); // 1:野菜、2:果物

    // 食品フィールド(セレクトボックス)のoptionをクリア
    $('#form_food').children().remove();

    // 選択された種類によって、食品フィールドのoptionを設定
    set_options(type);
  });
});

function set_options(type)
{
  if(type === '1'){ // 野菜が選択された場合
    $('#form_food').append($('<option>').val('1').text('1:にんじん'));
    $('#form_food').append($('<option>').val('2').text('2:玉ねぎ'));
    $('#form_food').append($('<option>').val('3').text('3:じゃがいも'));
  }else{            // 果物が選択された場合
    $('#form_food').append($('<option>').val('4').text('4:りんご'));
    $('#form_food').append($('<option>').val('5').text('5:バナナ'));
    $('#form_food').append($('<option>').val('6').text('6:オレンジ'));
  }  
}

質問

Answer 1

hiddenか何かで引き継いで、
$('#form_type').change(function(){・・・・}).trigger('change');
した上で、hiddenの値で#form_foodのvalueを変えてください

Comments

[AkihiroIshii]

今回はhidden以外の方法を使いましたが、何かで引き継いでからvalueを変えるという方針をご提示いただいたことで解決に至りました。ありがとうございます。

Answer 2

主な流れを次のようにしました。

1. POST送信された値を、コントローラからビュー経由でjavaScriptに渡す。
2. javaScriptでフィールドの項目を生成してから、渡された値を設定する。

具体的には、下記のように修正したところ上手く動きました（差分を+-で示します）。

コントローラ

+    // javaScriptで再設定するためにビューに渡す変数
+    $food = (Input::post('food')) ? Input::post('food') : '1';
    
    // ビューを生成
    $view = View::forge('home');
    $view->set_global('form', $form->build(''), false);
 +   $view->set_global('food', $food);
    return $view;

ビュー

<?php echo $form; ?>

<?php echo Asset::js('jquery.min.js'); ?>
-<?php echo Asset::js('main.js'); ?>
+<?php echo Asset::js('main.js', array('id'=>'script_id','food'=>$food)); ?>

javaScript

$(function(){
  // 初期処理
-  if($('#form_food').val() === null){
-    set_options('1'); // 空の場合は野菜のoptionを設定
-  }
+  init();
  
  // 種類フィールドが変更された時の処理
/* 〜中略〜 */
});

+function init()
+{
+  // 選択された値を取得
+  var food = $('#script_id').attr('food');
+  var type = $('#form_type').val();
+
+  // 選択された値に基づきセレクトボックスの値を設定
+  set_options(type);
+  $('#form_food').val(food);  
+}