セレクトタグのコンボボックス(hierselect)の処理

Question

フォームにてjqueryでセレクトタグのコンボボックスの処理を行ってまして正常に処理してます。
ただ、入力エラーを発生させたり、確認ページから戻ったり(ページ遷移)すると処理が切れてセレクト制御が効いてない状態になり困ってます。

色々調べていますが、解決方法が見当たらないので
質問させて頂きました。

宜しくお願い致します。

$(document).ready(function(){
 

    // プルダウンのoption内容をコピー
    var pd2 = $("#lv2Pulldown option").clone();
    var pd3 = $("#lv3Pulldown option").clone();
    var pd4 = $("#lv4Pulldown option").clone();
 
    // 1→2連動
    $("#lv1Pulldown").change(function () {
        
        // lv1のvalue取得
        var lv1Val = $("#lv1Pulldown").val();
 
        // lv2Pulldownのdisabled解除
        $("#lv2Pulldown").removeAttr("disabled");
 
        // 一旦、lv2Pulldownのoptionを削除
        $("#lv2Pulldown option").remove();
 
        // (コピーしていた)元のlv2Pulldownを表示
        $(pd2).appendTo("#lv2Pulldown");
 
        // 選択値以外のクラスのoptionを削除
        $("#lv2Pulldown option[class != p"+lv1Val+"]").remove();
 
        // 「▼選択」optionを先頭に表示
        $("#lv2Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
 
        // lv3Pulldown disabled処理
        $("#lv3Pulldown").attr("disabled", "disabled");
        $("#lv3Pulldown option").remove();
        $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');

        // lv3Pulldown disabled処理
        $("#lv4Pulldown").attr("disabled", "disabled");
        $("#lv4Pulldown option").remove();
        $("#lv4Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
    });
 
    // 2→3連動
    $("#lv2Pulldown").change(function () {
        
        // lv2のvalue取得
        var lv2Val = $("#lv2Pulldown").val();

        // lv3Pulldownのdisabled解除
        $("#lv3Pulldown").removeAttr("disabled");
 
        // 一旦、lv3Pulldownのoptionを削除
        $("#lv3Pulldown option").remove();
 
        // (コピーしていた)元のlv3Pulldownを表示
        $(pd3).appendTo("#lv3Pulldown");
 
        // 選択値以外のクラスのoptionを削除
        $("#lv3Pulldown option[class != p"+lv2Val+"]").remove();
 
        // 「▼選択」optionを先頭に表示
        $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
    });

    // 2→4連動
    $("#lv2Pulldown").change(function () {
        $(window).resize();
        // lv2のvalue取得
        var lv2Val = $("#lv2Pulldown").val();
 
        // lv3Pulldownのdisabled解除
        $("#lv4Pulldown").removeAttr("disabled");
 
        // 一旦、lv3Pulldownのoptionを削除
        $("#lv4Pulldown option").remove();
 
        // (コピーしていた)元のlv3Pulldownを表示
        $(pd4).appendTo("#lv4Pulldown");
 
        // 選択値以外のクラスのoptionを削除
        $("#lv4Pulldown option[class != p"+lv2Val+"]").remove();
 
        // 「▼選択」optionを先頭に表示
        $("#lv4Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
    });

    
});

Answer 1

値を保存していないので、そりゃ遷移すれば消えますよね。
sessionStrageでも使ったらどうですか？cookieより便利ですよ。

Comments

[tree_tree]

内容は消えてはいないです。
処理が切れている状態で
内容は保持されているので一見問題はないように見えるのですが
セレクトを選択すると制御で見えないはずの選択肢が出ている状態です。

sessionStrageってものが分からないので調べてみます。
ありがとうございます。

[shi_ue]

それはブラウザが保持しているだけですよね？
trigger("change")とコールしてしまうと、おかしくなると思いますよ。
どちらにしても状態はちゃんと保持する必要がある（ブラウザに頼らない）必要があるので、sessionStrageでもcookieでもいいので、選択した内容を保持するようにしてみてください。

[tree_tree]

ブラウザーで保持してるだけです。
内容を保持する方法を調べます。
長い戦いになりそうですｗ

ありがとうございます。