<select name="name1">
<option value="" selected>選択してください</option>
<option value="あああああ">あああああ</option>
<option value="いいいいい">いいいいい</option>
<option value="ううううう">ううううう</option>
<option value="えええええ">えええええ</option>
</select>

<div class="box">
「あああああ」、「いいいいい」を選択した場合のみ表示
</div>

$(function(){
    $('[name=name1]').change(function() {
      var v = $('[name=name1]').val();
      if (v == 'あああああ') {
        $('.box').css('display', 'block');
      } else if (v == 'いいいいい') {
        $('.box').css('display', 'block');
      } else {
        $('.box').css('display', 'none');
      }
    });
  });

メールフォームでselectによって要素を表示非表示にするようにしたのですが、「あああああ」を選択し、「.box」を表示し、確認画面ページへ遷移後、ブラウザバックで戻ると、「あああああ」は選択したままなのですが、「.box」だけがデフォルトの非表示となってしまいます。

jquery.cookie.jsなどでどうにかならないのでしょうか。

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

回答2件

バックナビゲーションでブラウザのメモリにどページが残っていない場合、HTMLのソースのパーズ後に、ブラウザが <input> <select> <textarea> などの値をイベント無しで書き戻します。このタイミングはブラウザによってまちまちなのですが、pageshow イベントより前に起きるので、pageshow イベントで値に応じた処理をすれば大丈夫です。

投稿2021/04/08 07:15

int32_t

総合スコア20884

buk

2021/04/08 09:49

ご回答ありがとうございます。なるほど。pageshowについてもこれから勉強します。

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

ベストアンサー

訂正

javascript
1$(function(){
2  $('.box').hide();
3  $('[name="name1"]').on('change',function(){
4    $('.box').toggle($.inArray($(this).val(),["あああああ","いいいいい"])>=0);
5  }).delay(1).queue(function(){
6    $(this).trigger('change');
7  });
8});