※ ChatGPTを利用し、要約された質問です（原文：いつも参考にさせて頂いています。）
javascriptでセレクトメニューで選択した内容が消える問題
このQ&Aのポイント
javascriptを使用して作成したセレクトメニューで選択した内容が、別のページに遷移した際に消えてしまう問題が発生しています。
選択した内容を遷移先のページでも表示させる方法について教えてください。
セレクトメニューを使用して特定の項目を選択し、その選択内容に応じたURLに遷移する処理を実装していますが、遷移後のページでも選択内容を保持する方法がわかりません。
いつも参考にさせて頂いています。
javascriptでセレクトメニューを作っているのですが
うまく出来ないのでどなたか教えて下さい。
宜しくおねがいします。
３連動するセレクトメニューで
３つ目のセレクトメニューを選ぶと
選ばれた項目に対応するURLに飛ぶように作っています。
ここからが質問なのですが、
ページに飛んだ時にセレクトメニューで選択した内容が消えてしまいます・・・
飛んだ先のページでも、選択した内容を表示させるには
どのようにすればいいのでしょうか？
ご存知の方がいましたら教えて下さい。
---html部分----
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<form id="f0">
<select id="s0">
<option value="">----------------</option>
</select>
<select id="s1">
<option value="">----------------</option>
</select>
<select id="s2">
<option value="">----------------</option>
</select>
</form>
</body>
</html>
---外部javascriptファイル----
var data=
{
吉野家:
{
"牛丼(並)":{0:"380円"},
"牛丼(大盛)":{1:"480円"},
"牛丼(特盛)":{2:"630円"}
}
,松屋:
{
"牛丼(並)":{3:"320円"},
"牛丼(大盛り)":{4:"420円"},
"牛丼(特盛)":{5:"520円"}
}
,すき家:
{
"牛丼(並)":{6:"280円"},
"牛丼(大盛)":{7:"380円"},
"牛丼(特盛)":{8:"480円"}
};
window.onload=function(){
s0=document.getElementById("s0");
s1=document.getElementById("s1");
s2=document.getElementById("s2");
setSelect(data,s0);
s0.onchange=function(){
clearSelect(s2);
if(this.value==""){
clearSelect(s1);
}else{
setSelect(data[this.value],s1);
}
}
s1.onchange=function(){
if(this.value==""){
clearSelect(s2);
}else{
setSelect(data[s0.value][this.value],s2);
}
}
s2.onchange=function(){
location.href="/////////";
}
}
function setSelect(obj,sel){
while(lc=sel.lastChild){
sel.removeChild(lc);
};
var op=document.createElement("option");
op.setAttribute("value","");
op.appendChild(document.createTextNode("----------------"));
sel.appendChild(op);
for(var i in obj){
var txt=(typeof obj[i]=="object")?i:obj[i];
var op=document.createElement("option");
op.setAttribute("value",i);
op.appendChild(document.createTextNode(txt));
sel.appendChild(op);
}
}
function clearSelect(sel){
while(lc=sel.lastChild){
sel.removeChild(lc);
};
var op=document.createElement("option");
op.appendChild(document.createTextNode("----------------"));
sel.appendChild(op);
};
お礼
書き込みありがとうございます。 すぐには出来そうにないですが、1つづつやってみます。 大変参考になりました。