リロード時もコンボボックスの内容を保持したい
select要素を使ったコンボボックスの作成で困っています。
1つ目のセレクトボックスで選んだ都道府県に対応した市を、
2つ目のセレクトボックスに反映させるところまではうまく行くのですが、
ページをリロード、あるいは遷移先から戻ってくると、
1つ目のセレクトボックスを別のものに再選択しないと2つ目が選べない状態になります。
対応方針として、ページロード時に都道府県を選んでいれば、
2つ目のセレクトボックスを再構築するサブルーチンの処理に回すことを考えたのですが(サンプルのコメントアウト部分です。)、
引数に問題があるのか、どうも再構築がうまく行きません。
現状のHTMLを活かしたまま、Javascriptの変更のみで
要望の動きを実現させる方法をご教示いただけないでしょうか。
No.1ベストアンサー
- 回答日時:
ある程度の精度が必要であれば、クッキーに保存しておいて
onloadで処理をすることです。
この回答への補足
ご回答ありがとうございます。
できるならば、Cookieは使いたくないところです。
質問時にソースが貼れなかったので、以下に貼り付けます。
------------------------------
//スクリプト部分
<script>
function ConnectedSelect(selIdList){
for(var i=0;selIdList[i];i++) {
var CS = new Object();
var obj = document.getElementById(selIdList[i]);
if(i){
CS.node=document.createElement('select');
var GR = obj.getElementsByTagName('optgroup');
while(GR[0]) {
CS.node.appendChild(GR[0].cloneNode(true));
obj.removeChild(GR[0]);
}
obj.disabled = true;
}
if(selIdList[i+1]) {
CS.nextSelect = document.getElementById(selIdList[i+1]);
obj.onchange = function(){ConnectedSelectEnabledSelect(this)};
}
//if(obj.value !== "#") {
//alert(obj.value);
//ConnectedSelectEnabledSelect(obj);
//}
obj.ConnectedSelect = CS;
}
}
function ConnectedSelectEnabledSelect(oSel){
var oVal = oSel.options[oSel.selectedIndex].value;
if(oVal) {
while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1);
var eF = false;
for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) {
if(OG.label == oVal) {
eF = true;
for(var OP=OG.firstChild;OP;OP=OP.nextSibling)
oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true));
break;
}
}
oSel.ConnectedSelect.nextSelect.disabled = !eF;
} else {
oSel.ConnectedSelect.nextSelect.selectedIndex = 0;
oSel.ConnectedSelect.nextSelect.disabled = false;
}
}
</script>
//HTML部分に続く
ご回答ありがとうございました。
サンプルのソースコードを追記したかったのですが、、方法がわからないので、
勝手ながら、一旦質問を閉じたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP php my adminより取り出したデータ表示 2 2022/06/15 11:56
- SQL Server DBのテーブルの設計ができず困っています。 2 2023/06/29 16:43
- その他(悩み相談・人生相談) 引っ越すことを反対する親 6 2022/08/20 07:33
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- Excel(エクセル) [クイックアクセスツールバー]の設定ファイルの格納場所について、 5 2023/04/21 14:43
- JavaScript HTML,JS初心者です。 2つのselectボックスが有り その選択の組み合わせにより 指定した文 3 2022/03/31 23:35
- Windows 10 タスクバー上に表示されたアドレス・ボックス? 1 2023/04/30 17:37
- 政治 日本の警察は解体して、3つぐらいに再編したら良いのではないでしょうか? 私の案では、警察を3つに分割 1 2022/11/13 17:42
- 政治 世界では核戦争が心配されているのに、自民党は自分の選挙区のことで頭の中が一杯ですか? 8 2022/10/12 11:31
- Access(アクセス) Accessにインポートした複数のテーブルを表示させる方法が分かりません。 1 2023/01/30 20:22
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Selectボックスの幅を自動で広...
-
現在時刻を取得してフォームのs...
-
プルダウン 項目が多いので先頭...
-
Selectの中身をfor文で入れる
-
<textarea>にプルダウンを表示...
-
onFocusOutが複数回呼ばれる!
-
セレクトメニューで選択された...
-
ブラウザの戻るボタンを押した...
-
jQuery セレクトボックスで選択...
-
javascript作成してます。ラジ...
-
Pythonで会員サイトの自動ログ...
-
特定<table>内の<td>の色を変える
-
hiddenのvalueの値を変えたい
-
ラジオボタンにタブインデック...
-
javascriptで入力禁止文字をチ...
-
jspでのArrayListの値の表示
-
return trueとreturn falseの用...
-
【UWSC】HTML内のある部分を抽...
-
クリックさせたいが、click()が...
-
正規表現で複数マッチ条件で悩...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
セレクトの値を取得できない
-
現在時刻を取得してフォームのs...
-
テーブルにおける行(セルにプル...
-
document.form で nullまたは...
-
javascriptでの2つのプルダウン...
-
リストボックスの項目の順番を...
-
javascriptでselectボックスの<...
-
onFocusOutが複数回呼ばれる!
-
プログラムがうまく動きません...
-
selectタグに直接onChangeを書...
-
プルダウンとテキストの連動
おすすめ情報