jquery-コンボボックス-選択状態

質問

3つのコンボボックスをjqueryを使って連動させております。
連動するコンボボックスを選択しボタンを押下すると
自画面へ遷移します。
その際に先ほどの画面で選択したコンボボックスを選択状態に
したくて困っております。
html
<select name="area" id="parent">
<option value="1">エリアを選択</option>
<option value="2">北海道・東北</option>
<option value="3">関東</option>
　　　　　　・・・
</select>
<select name="pref" id="child">
<option class="sub_1" value="1">都道府県を選択</option>
<option class="sub_2" value="1">都道府県を選択</option>
<option class="sub_2" value="2">北海道</option>
<option class="sub_2" value="3">青森</option>
<option class="sub_2" value="4">岩手</option>
<option class="sub_3" value="1">都道府県を選択</option>
<option class="sub_3" value="14">東京</option>
<option class="sub_3" value="15">神奈川</option>
　　　　　　・・・
</select>
<select name="region" id="grandsun">
<option class="sub_1" value="1">地域を選択</option>
<option class="sub_2" value="1">地域を選択</option>
<option class="sub_2" value="0101">札幌</option>
<option class="sub_3" value="1">地域を選択</option>
<option class="sub_3" value="0201">青森市</option>
<option class="sub_3" value="0202">弘前市</option>
<option class="sub_3" value="0203">八戸市</option>
　　　　　　・・・
　　　　　　・・・
</select>

function makeSublist(parent,child,isSubselectOptional,childVal){
$("body").append("<select style='display:none' id='"+parent+child+"'></select>");
$('#'+parent+child).html($("#"+child+" option"));
var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
childVal = (typeof childVal == "undefined")? "" : childVal ;
$("#"+child+' option[@value="'+ childVal +'"]').attr('selected','selected');
$('#'+parent).change(
function(){
var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
$('#'+child).trigger("change");
$('#'+child).focus();
}
);
}
$(function(){
makeSublist('child','grandsun', true, '');
makeSublist('parent','child', false, '1');
});

回答No.1

yyr446

@value=...の @ は余分ですね。
それは、直すとして、
画面遷移してもどってきた時、復元するには
cookieとかwebstrage使えばよい。

webstrage使用の例

$(function(){
if(localStorage.parent) $("#parent").val(localStorage.parent);
makeSublist('parent','child',true,localStorage.child);
makeSublist('child','grandsun',true,localStorage.grandsun);
$(window).unload(function(){
localStorage.parent = $("#parent").val();
localStorage.child = $("#child").val();
localStorage.grandsun = $("#grandsun").val();
});
});

お礼

ご回答頂きありがとうございます。
頂きましたソースを使わせて頂きましたが
うまく行きませんでした。
想定しているのは
■初期表示時
　選択してください(エリア)選択してください(都道府県)選択してください(地域)
　エリア&都道府県&地域(コンボボックス)が連動
　エリア&都道府県&地域を選択
■Post時(自画面表示時)
　前画面で選択したエリア&都道府県&地域が選択された常態になる。
　エリア&都道府県&地域(コンボボックス)が連動　

上記、■初期表示後のエリアには前回選択したエリア
都道府県&地域が空のプルダウンになってしまいます。

頂いたソースを追加した場所が悪いのでしょうか？
ご教授頂きますでしょうか？
---同じソースに頂いたSrcを記載しました----------
function makeSublist(parent,child,isSubselectOptional,childVal){
$("body").append("<select style='display:none' id='"+parent+child+"'></select>");
$('#'+parent+child).html($("#"+child+" option"));
var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
childVal = (typeof childVal == "undefined")? "" : childVal ;
$("#"+child+' option[value="'+ childVal +'"]').attr('selected','selected');
var parentValue = $('#'+parent).attr('value');
alert(parentValue+"kawabata");
$('#'+parent).change(
//$('#'+parent).changesOccurred(
function(){
var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
$('#'+child).trigger("change");
$('#'+child).focus();
}
);
}
$(function(){
makeSublist('child','grandsun', true, '');
makeSublist('parent','child', false, '1');
});
$(function(){
if(localStorage.parent) $("#parent").val(localStorage.parent);
makeSublist('parent','child',true,localStorage.child);
makeSublist('child','grandsun',true,localStorage.grandsun);
$(window).unload(function(){
localStorage.parent = $("#parent").val();
localStorage.child = $("#child").val();
localStorage.grandsun = $("#grandsun").val();
});
});