ブラウザの戻るボタンを押すと<select>の選択がおかしくなるのをjQueryで解決
まず大前提としてフォームのある画面では「ブラウザの戻るボタン」は極力押さないでいただきたい！
…のではありますが、まぁ、あれば押すのが人情ですよね。
今回はブラウザの戻るボタンを押して戻ったら、表示されているデータとフォームの選択値がずれちゃった、を解決する話です。
気づいたきっかけ
お客様からの指摘ですorz
普段自分が開発しているサイトではもちろん、ブラウザの戻るボタンなんて押さないので、気づかなかったですよ。
指摘のあったサイトは、検索フォームと結果データが一緒の画面なので発覚。
症状
初期表示(デフォルト検索結果含む)：A→選択を変更して検索⇒結果表示：B→ブラウザの戻るボタン
の一連の処理を行うと、最後の画面が以下のようになります。
- 結果表示⇒A
- ソース上のフォーム選択状態⇒A
- 画面上のフォーム選択状態⇒B
おそらく、妙な具合にキャッシュされちゃっているんだと思われます。
グーグル先生に聞いてみた
ら、解決策は「戻る使うな」という至極ごもっともな結果に。
それでも頑張る先人たちの足跡をたどるに、以下の点がポイントっぽい。
- フォームキャッシュの削除
- ブラウザによって削除され方に違いがある。
- onloadとonunload=""を仕込めば、全ブラウザでフォームキャッシュが削除される
- defaultSelectead と selected
- form.reset() の方法⇒コレは使えなかった
- defaultSelected==trueのoptionにselectedを付け直す（ループが必要）
最終的にこうなった
結果的には３行ですが、そこに至るまでの道のりが…長かった…。
defaultSelectedとselectedの違いとか、
option[selected]とoption:selected の違いも知らなかったです。
参照：
ブラウザの戻るボタンで戻ったときに呼ばれるイベントとかキャッシュとかそこらへんのこと - koumiyaの日記
jquery - Find default selected option in HTML select tag? - Stack Overflow （英語注意：真ん中のあたり）
