jQueryでフォームのselectからchangeで動作させたものをブラウザバックしても保持したい

Question

jQueryでフォームのselectからchangeで動作させたものをブラウザバックしても保持したい

以下の様なフォームで
質問1でセレクトから選ぶと、質問2に自動的に選択肢が入るようになっております。

質問1で
野球が選ばれた場合は変数A1から
サッカーが選ばれた場合は変数A2から
質問2のセレクトにセットされます。

ここまでは正常に動作するのですが、
次のページに遷移して、ブラウザバックしてくると
質問1の選択肢が解除されてしまう仕様になっています。

これはそのようにコードが書かれているので当然なのですが、
ブラウザバックしてきた場合に、changeは発動しないので、
仕方なく質問1を初期化しております。

これをブラウザバックしてきても、
質問1と質問2で選んだものが選択されているようにするには、どうしたら良いでしょうか？

どなたかご教授お願い致します。

#HTML

<form method="post" action="○○" name="form1"> <h1>1.好きなスポーツを指定してください。</h1> <select name="sports" id="parent"> <option value="">選択して下さい</option> <option value="A1">野球</option> <option value="A2">サッカー</option> </select> <h1>2.好きなチームを指定してください。</h1> ※先に質問1を指定してください<br> <select name="team" id="child"> <option value="">選択して下さい</option> </select> <input type="submit" value="送信"> </form>

#JS

<script> jQuery(function($){ var team = { A1:[ '巨人', 'ヤクルト', '広島', '横浜', '中日', '阪神', ], A2:[ 'ヴェルディ', 'マリノス', 'サンフレッチェ', 'レッズ', 'ベルマーレ', ], }; var noValue = $('#child').html(); //フォーム選択による動作 $('#parent').on('change', function(){ $('#child').html(noValue); var cat = $(this).val(); if(cat){ var item = team[cat]; for(var i = 0; i < item.length; i++){ option = '<option value="' + item[i] + '">' + item[i] + '</option>'; $('#child').append(option); } } }); }); function init() { if ($('#parent option[selected=selected]').attr('selected')) { $('#parent').val($('#parent option[selected=selected]').val()); } else { $('#parent option:first').prop('selected', 'selected'); } } jQuery(function () { init(); $(window).on('pageshow', init); }); </script>

Comments

[noka_blank]

ページ遷移でデータを引き継ぐ場合は、cookieやセッション等が必要と思います。
おそらく現在もサーバサイドでそのような処理をしていると思いますので、formのactionで実行されるスクリプトを掲示していただければ、回答を得やすいと思います。

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。

Answer 1

webstorage(今回はsessionstorage)を使ってみては！

■ 検証環境 ■
Win10
Chrome72
jsfiddle
jQuery3.3.1

jQuery(function($){

team = {
A1:[
'巨人',
'ヤクルト',
'広島',
'横浜',
'中日',
'阪神',
],
A2:[
'ヴェルディ',
'マリノス',
'サンフレッチェ',
'レッズ',
'ベルマーレ',
],
};

var noValue = $('#child').html();
storage = sessionStorage;

fnTeamName = function(SportsName,callback){
    var item = team[SportsName];
    for(var i = 0; i < item.length; i++){
        option = '<option value="' + item[i] + '">' + item[i] + '</option>';
        $('#child').append(option);
    }
    callback();
}

//フォーム選択による動作
$('#parent').on('change', function(){
    var sportsName = $(this).val(); 
    storage.setItem('sportsName', sportsName);

$('#child').html(noValue);
    var cat = $(this).val();
    if(cat){
        fnTeamName(cat,function(){});
    }
});

$('#child').on('change', function(){
    var teamName = $(this).val(); 
    storage.setItem('teamName', teamName);
});    
});

function init() {
    if ($('#parent option[selected=selected]').attr('selected')) {
        $('#parent').val($('#parent option[selected=selected]').val());
    }
    else {
        if(storage.getItem('sportsName')){
          var getSportsName = storage.getItem('sportsName');
          var getTeamName = storage.getItem('teamName');
          $("#parent").val(getSportsName);
          fnTeamName(getSportsName,function(){
      	    $("#child").val(getTeamName);
          });
        }else{
          $('#parent option:first').prop('selected', 'selected');    
        }
    }
}

jQuery(function () {
    init();
    $(window).on('pageshow', init);
});

Comments

[yooashleaf]

sessionstorageは前から興味はあったのですが、今回みたいな時に使うのですね！
早速実装してみました！うまく動作しております！本当に助かりました！

Answer 2

クッキーを使うと良いでしょう
（動作確認のためサーバー側にphpを指定してあります）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){
  var team = {
    "":[],
    "A1":['巨人','ヤクルト','広島','横浜','中日','阪神',],
    "A2":['ヴェルディ','マリノス','サンフレッチェ','レッズ','ベルマーレ',],
  };
  if(typeof $.cookie('parent')=="undefined") $.cookie('parent',0);
  if(typeof $.cookie('child')=="undefined") $.cookie('child',0);
  $('#parent').prop('selectedIndex',$.cookie('parent')).on('change', function(){
    var cat = $(this).val();
    var item = team[cat];
    $('#child option:gt(0)').remove();
    $.each(item,function(x,y){
      $('#child').append($('<option>').val(y).text(y));
    });
  }).trigger('change');
  $('#child').prop('selectedIndex',$.cookie('child'));
  $('#form1').on('submit',function(){
    $.cookie('parent',$('#parent').prop('selectedIndex'));
    $.cookie('child',$('#child').prop('selectedIndex'));
  });
});


</script>
<form method="post" action="send.php" id="form1">

<h1>1.好きなスポーツを指定してください。</h1>
<select name="sports" id="parent">
<option value="">選択して下さい</option>
<option value="A1">野球</option>
<option value="A2">サッカー</option>
</select>

<h1>2.好きなチームを指定してください。</h1>
※先に質問1を指定してください<br>
<select name="team" id="child">
<option value="">選択して下さい</option>
</select>

<input type="submit" value="送信">
</form>

• send.php

<?PHP
print_r($_POST);
print "<hr>";
print_r($_COOKIE);
print "<hr>";
?>
<input type="button" onclick="history.back()" value="back">

Comments

[yooashleaf]

PHPまでありがとうございます！
今回は大変恐縮ですが、他の回答者様をベストアンサーに選ばせて頂きますが、クッキーの方法も後学の為、試してみたいと思います！本当にありがとうございました！