JSで動的なリストの選択状態を保持したい

Question

実現したいこと

selectの選択内容をjavascriptで保持したい

前提

カテゴリ1によって動的に値が変わるカテゴリ2があります。
カテゴリ1の内容はサーバー側で処理していますが、カテゴリ2は1の選択によって値が変わります。その為Sessionでは選択内容を保持してもできないのでlocalstrageを使用しようと思いましたが上手くいきません。
サーバー側はC#、MVCです

発生している問題・エラーメッセージ

エラーなし

該当のソースコード

$(document).ready(function () {
            $("#category1").change(function () {
                var selectedCategory1 = $(this).val();
                localStorage.setItem("selectedValue", selectedCategory1);

                $("#category2").empty();

                if (selectedCategory1) {
                    $.getJSON("/Home/GetCategory2Options", { category1: selectedCategory1 }, function (data) {
                        $("#category2").append('<option value="">' + "すべて" + "</option>");
                        $.each(data, function (index, value) {
                            $("#category2").append("<option value='" + value + "'>" + value + "</option>");
                        });
                    });
                }
            });

            $("#category2").change(function () {
                var selectedCategory2 = $(this).val();
                localStorage.setItem("selectedValue2", selectedCategory2);
            });
        });

        window.onload = function () {
            // localStorageから保存された選択された値を取得
            var selectedValue = localStorage.getItem("selectedValue");

            if (selectedValue !== null) {
                $("#category1").val(selectedValue); // category1の選択状態を復元

                $("#category2").empty(); // 一度リセットしてからオプションを追加
                $.getJSON("/Home/GetCategory2Options", { category1: selectedValue }, function (data) {
                    var selectedCategory2 = localStorage.getItem("selectedCategory2");
                    $("#category2").append('<option value="">すべて</option>');
                    $.each(data, function (index, value) {
                        $("#category2").append("<option value='" + value + "'" + (value == localStorage.getItem("selectedCategory2") ? "selected" : "") + ">" + value + "</option>");
                    });

                });
            }
        }

試したこと

localstrage自体には値が入っていることが確認出来ましたがeachで参照している時はnullになっていました。
each分の中で直接localstrageを参照する場合も同様でした。
先にカテゴリ2をeachで復元してからvalueを選択する方法も試しましたがダメでした。

Comments

[yambejp]

HTMLを提示ください
またapiが返すjsonの形式も明示されたほうがよいでしょう

Answer 1

jQueryの場合すでに設定済みのイベントはtrigger()メソッドで呼べます
(同じ処理を２度書く必要はありません)

<script>
$(function(){
  var selectedCategory1 = localStorage.getItem("selectedValue");
  $('#category1').val(selectedCategory1).on('change',function(){
    var selectedCategory1 = $(this).val();
    localStorage.setItem("selectedValue", selectedCategory1);
    var url="/Home/GetCategory2Options";
    $.ajax({
    url:url,
    data:{category1:selectedCategory1},
    dataType:"json",
    }).done(function(data){
      console.log(data);
    });
  }).trigger('change');
});
  </script>
<select id="category1">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

ふつうにjsで書けばこんな感じ

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const selectedCategory1 = localStorage.getItem("selectedValue");
  category1.value=selectedCategory1;
  category1.addEventListener('change',()=>{
    const selectedCategory1 = category1.value;
    localStorage.setItem("selectedValue", selectedCategory1);
    const url="/Home/GetCategory2Options";
    const usp=new URLSearchParams();
    usp.set('category1',selectedCategory1);
    fetch(`${url}?${usp}`).then(res=>res.json()).then(data=>{
      console.log(data);
    });
  });
  const e_change=new Event("change");
  category1.dispatchEvent(e_change,true,true);
});
  </script>
<select id="category1" name="category1">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Comments

[syusyusyu___]

ありがとうございます！

Answer 2

localStorage.setItem("selectedValue2", selectedCategory2);

var selectedCategory2 = localStorage.getItem("selectedCategory2");

保存時は selectedValue2、復元時は selectedCategory2 がキーになってますね。同じキー名にすべきかと思います。

Comments

[syusyusyu___]

すみません。
盲点でした。
もっとよく見ます。