コンボ１の内容に応じてコンボ２の内容変更

質問

お世話になります。
コンボボックスが2つあり、一つ目に選ばれた内容
に応じて再度データベースと通信し、その内容を二つ目の
コンボボックスに反映したいのです。一般的にはどのようにHTMLを記述するのでしょうか？
DBアクセスにはperlを使用していますが、HTMLの
範囲での内容を教えていただければ大体わかります。
FORMの構成の仕方、javaの記述の仕方というポイントで
教えていただけないでしょうか？

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

回答No.3

LancerVII · ベストアンサー

こんにちは。

一度消えたように見えてしまうのはサーバに投げているのでそうなって
しまいます。

しかし、選択内容に応じてDBにアクセスする場合はどうしても一度サーバに
リクエストを投げる必要が出てきます。

これを回避するには、全ての情報を最初に読み込んでおき、
JavaScriptでコンボボックスの内容を変更する必要が出てきます。
（
DBにはアクセスできません。input.cgiにアクセスした段階のデータなので
仮にそのまま１時間放って置いて、（その間にDBに更新があったとしても）
コンボボックスを選択して次のコンボボックスに表示される内容は１時間前のものです。
）
ここの新規質問登録するときのカテゴリ選択がその方法と思われます。

フレームでわけたりしてゴリゴリにJavaScript使って書けば
出来ないこともないと思いますが、あまりオススメできません。

お礼

丁寧な回答ありがとうございました。
一応要件は達成したので、これでいいことにしたいと思います

回答No.2

LancerVII

こんにちは。

> そうですね(*~_~*)頭ではわかっているつもりが、お恥ずかしいです。

いえいえ、余計なこと書きました。ただ、JavaとJavaScriptって名前とコードの書き方
が似てるだけなので結構同じに捉えている方が多いので。

> そのフォームにはほかにもたくさん入力項目があり、
> そのコンボの上位にも下位にも入力項目が存在します。
> その場合大きくFORMでくくって、そのコンボのところだけ
> ネスト（入れ子）してFORMと書きたいところだけど、
> できないんですよね？たしか。そういう事情がある場合の
> ことを考えて、FORMでそのコンボを囲まずにできる方法がありますでしょうか？

フォームの入れ子は無理ですね。
ただ、わける必要もないかと思われます。
（最終的にはコンボボックスの選択値もサーバ側で必要ですよね？）

例えばですが、下のようなフォームの構成になっているとします。
（先ほどの回答ですとちょっと無理があったので訂正します）

送信先スクリプトをregist.cgi
入力項目のあるページをinput.cgi

<form action="./regist.cgi" method="post" name="inputForm">
入力項目1：<input type="text" name="txt1">
入力項目2：<input type="text" name="txt2">
大分類選択：<select name="rcode" onChange="change();"></select>
中分類選択：<select name="scode"></select>
入力項目3：<input type="text" name="txt3">
<input type="submit" value="送信">
</form>

== JavaScript

<script type="text/javascript">
<!--

function change () {

// コンボボックスに変更があった場合は送信先を
// 自URLに変更し、サブミットを実行
document.inputForm.action = "./input.cgi";
document.inputForm.submit();

}
//-->
</script>

input.cgiでは、大分類選択の値が送信されてきた場合はその値をキーに
中分類のコンボボックスを生成し、
フォームを出力。また、他のテキスト入力項目等の値も取得し、
inputフィールドのvalueに初期値として埋め込む。
（
こうすることにより、コンボが変更されサブミットがかかってinput.cgiで再表示する際に
既に入力された情報が消えなくて済みます
）

大分類選択の値が送信されてこない場合（初回アクセス時）は
中分類のコンボボックスは生成しない。

最終的に入力が終わり、送信ボタンを選択した際は、regist.cgiにサブミットされるので
値を受け取って処理を行う。
（コンボボックスを変更した場合はJavaScriptによってindex.cgiに飛ぶようにしてある）

わかりにくくてすいません。
何かありましたらまた補足して下さい。

補足

LancerVIIさん、迅速かつご丁寧な対応ありがとうございます。
やってみました。なるほど、全体の情報をもっていって、ページの頭からもう一度cgiで記述する、という方法ですね。やってみましたが、もう一つ贅沢を申し上げてよろしいでしょうか？

この状態ではコンボの内容を変えるたびに若干ですが、画面がフラッシュするように感じます。つまり再度頭から書き直すので一度消えたように見えますね。
それをどうにかこのコンボの部分のみで完結できないでしょうか？つまり、見た目上、上位データが保持されているように見えるのではなく、実際上位データを保持し、書き換わるのは対象コンボのみ、ということにはできないでしょうか？

私の認識違いの部分がある場合、またご指摘いただけるとありがたいです。

どうぞよろしくお願いいたします。

回答No.1

LancerVII

こんにちは。

厳密に言えばHTMLでもなくJavaでもなくJavaScriptのお仕事ですね。

データの持ち方等はわからないのでうまく置き換えてみて下さい。

中分類コードでデータを取得し、該当する情報をコンボ２にします。

<form action="***" method="post" name="selectMenu">
<select name="value1" onChange="change1();">
<option value="001">くだもの</option>
<option value="002">やさい</option>
<option value="003">さかな</option>
<option value="999">その他</option>
</select>

<select value="value2">
＊ここはperl内で取得したデータをもとに生成してください。
</select>
</form>

== JavaScript

function change1 () {
document.selectMenu.submit();
}

こうすることで、１のコンボボックスを変更したときにサブミットを行い、
サーバ上で値が取得できます。

その値を使用してコンボボックス２に使う情報を取得し、
表示すればいいと思います。

細かいところだと、コンボボックス１の選択状態を変更後に
も保持する等するとよいと思います。
（サブミットかけるとそのままでは一番上のものがselect状態になってしまうため）

補足

早速の返答ありがとうございます。
>>厳密に言えばHTMLでもなくJavaでもなくJavaScriptのお仕事ですね。
そうですね(*~_~*)頭ではわかっているつもりが、お恥ずかしいです。

的確な助言ありがとうございます。
ただ、答えをいただいて気づいたのですが、
そのフォームにはほかにもたくさん入力項目があり、
そのコンボの上位にも下位にも入力項目が存在します。
その場合大きくFORMでくくって、そのコンボのところだけ
ネスト（入れ子）してFORMと書きたいところだけど、
できないんですよね？たしか。そういう事情がある場合の
ことを考えて、FORMでそのコンボを囲まずにできる方法がありますでしょうか？

どうぞよろしくお願いいたします。