Ajaxで加工したページの初期化について

質問

ページ上にテキストボックスやセレクトボックスがたくさんあります。

セレクトボックスAで選択した値に基づいて、セレクトボックスBやテキストボックスに一つの値を表示しています（セレクトボックスは選択不可状態になる）。

セレクトボックスAで選択しないときは、セレクトボックスBには予め選択肢が入っています。

セレクトボックスAで選択して、セレクトボックスBにデータを表示した後、
リセットボタンを押したらセレクトボックスBは初期状態の予め選択肢が入っている状態に戻したいです。

そして、セレクトボックスCには、別の選択肢を入れ直したいです。

このようなセレクトボックス、テキストボックスともに何十個もあるので、出来たら一括で初期状態に戻し、その後、セレクトボックスの選択肢の変更などのAjax加工をしたいと思っています。

ページのツールバーのページ更新ボタンを押すと、ページがリロードされて、初期化されるので、

window.location.reload();

と設定した後、さらにAjaxでセレクトボックスなどの変更をするプログラムを組んだのですが、

window.location.reload();

この後の処理が動いてくれません。
ページをリロードすると、その後の処理が無効？になってしまうのでしょうか。

一つずつセレクトボックスやテキストボックスのデータを削除して、さらに値をセットしてというのが効率が悪い気がして、
ページリロードのように、ページを初期化した後、必要なセレクトボックスやテキストボックスだけAjax処理をしたいなあと思うのですが、どのようにするのがいいのでしょうか。

効率のいいやり方をご存じの方がいらっしゃいましたらぜひ教えてください。
分かりづらいと思いますので、分からない点はご質問頂けたらと思います。

よろしくお願いいたします。

回答No.2

t_ohta · ベストアンサー

質問者さんがどのようなプログラム、HTMLを書かれているのか分からないので、具体的な回答が難しいですが、やりたいことは以下のようなモノなのではないでしょうか。

<script>
$(function() {
$("#sel1").change(function () {changeSel1();});
$("#sel2").change(function () {changeSel2();});
$("#btn_reset").click(function () {changeReset();});
changeReset();
});

function changeSel1 () {
var selVal1 = $('#sel1').val();
$("#sel2").children().remove();
switch (selVal1) {
case "1":
$('#sel2').append('<option value="1">選択肢１</option>');
$('#sel2').append('<option value="4">選択肢４</option>');
break;
case "2":
$('#sel2').append('<option value="2">選択肢２</option>');
$('#sel2').append('<option value="5">選択肢５</option>');
break;
case "3":
$('#sel2').append('<option value="3">選択肢３</option>');
$('#sel2').append('<option value="6">選択肢６</option>');
break;
default:
$('#sel2').append('<option value="1">選択肢１</option>');
$('#sel2').append('<option value="2">選択肢２</option>');
$('#sel2').append('<option value="3">選択肢３</option>');
$('#sel2').append('<option value="4">選択肢４</option>');
$('#sel2').append('<option value="5">選択肢５</option>');
$('#sel2').append('<option value="6">選択肢６</option>');
break;
}
changeSel2();
}

function changeSel2 () {
var selVal2 = $('#sel2').val();
$("#sel3").children().remove();
switch (selVal2) {
case "1":
$('#sel3').append('<option value="6">選択肢６</option>');
break;
case "2":
$('#sel3').append('<option value="5">選択肢５</option>');
break;
case "3":
$('#sel3').append('<option value="4">選択肢４</option>');
break;
case "4":
$('#sel3').append('<option value="3">選択肢３</option>');
break;
case "5":
$('#sel3').append('<option value="2">選択肢２</option>');
break;
case "6":
$('#sel3').append('<option value="1">選択肢１</option>');
break;
default:
$('#sel3').append('<option value="1">選択肢１</option>');
$('#sel3').append('<option value="2">選択肢２</option>');
$('#sel3').append('<option value="3">選択肢３</option>');
$('#sel3').append('<option value="4">選択肢４</option>');
$('#sel3').append('<option value="5">選択肢５</option>');
$('#sel3').append('<option value="6">選択肢６</option>');
break;
}
}

function changeReset () {
$("#sel1").val(null);
changeSel1();
}

</script>

<select name="sel1" id="sel1" size="10">
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
<option value="3">選択肢３</option>
</select>
<select name="sel2" id="sel2" size="10">
</select>
<select name="sel3" id="sel3" size="10">
</select>
<input type="button" id="btn_reset" value="リセット">

お礼

t_ohtaさん

ご回答ありがとうございます。

プログラムもご丁寧にありがとうございました！

ちょっと難しいですが、何度も見て、あーなるほどーという感じで、その解釈があっているか疑問ですが(笑

私が今作っているプログラムの中に入れ込んで使わせて頂きます！

お忙しい中本当にありがとうございました！！

またわからないことがありましたらぜひよろしくお願いいたします！！

今回は本当にありがとうございました！！

回答No.1

t_ohta

window.location.reload();　を実行するとブラウザはページの再読込を行います。
再読込をすると言う事は全てご破算にして最初からやり直すと言う事なので、HTMLやJavaScriptファイルなどを読み込み直して最初っから処理をやり直しますので、window.location.reload();　以降の処理は無かったことにされてしまいます。

セレクトボックスAの状態によって他の要素の内容が変わるのであれば、リセットボタンを押したらセレクトボックスAを未選択状態にする事で、他も連動して中身が変わるようにプログラムするのがいいのではないでしょうか。

セレクトボックスBはセレクトボックスAの状態によって変わるようにされているようですから、セレクトボックスAが未選択ならセレクトボックスBには全ての選択肢を表示するような処理を予め書いておけば初期状態に戻りますし、同様に他の要素を書き換える処理の所にデフォルト値に戻るような処理を書いておけば、セレクトボックスAを未選択状態にする事で全て連動して初期状態に戻せると思いますよ。

お礼

t_ohtaさん

ご回答ありがとうございました！

window.location.reload();　以降の処理は無かったことにされてしまうんですね。。

デフォルト値に戻るような処理というのはどのようにすれば宜しいのでしょうか。

このようにしてみたのですが、うまくできなくて、

$('#tb1').val($('#tb1').defaultValue);

もし宜しければ教えて頂けましたら嬉しいです。
よろしくお願いいたします。