階層式のプルダウンセレクトを作成したいのですが・・・

質問

ＣＧＩ初心者です。データベース検索をＰｅｒｌで作成というか、カスタマイズかけている段階なのですが、例えば、第一のプルダウンメニューで県名をセレクトしたら、次のブルダウンメニューには、セレクトされた県の市名や郡名のみが表示されていて、さらにそこからセレクトして検索ができるというのを作成したいのですが、どうしたらいいのか教えてください。
いまのところは、ダイレクトに検索させる方法をとっているのですが、このユーザが少なくとも100以上には増えるため、絞って検索できれば・・・と思っているのです。

# 第１ジャンル：ユーザ名
@part1 = ('大口市','春日市','筑後市','人吉市','宮田町','八女市','その他');（これからかなりデータは増えるのです。）

sub html {
# 表示開始
&header;
print <<"EOM";

<form method="$method" action="$script">
<input type=hidden name=mode value="search">
<table border=0 cellpadding=15><tr>
EOM
# 配列１
$size1 = @part1 + 1;
print "<td valign=top nowrap><font color=\"$t_color\">■</font> <B>ユーザ名</B><br>\n";
print "<select name=P1 >\n";
print "<option value=\"99\" selected>指定なし\n";

foreach (0 .. $#part1) {

print "<option value=\"$_\">$part1[$_]\n";
}

print "</select></td>\n";

よろしくお願いします。

回答No.4

y_oku · ベストアンサー

なるほど、既存のデータのみを利用すればいいんですね。
それならそれほど難しくなさそうですね。
県名を指定したときに検索データ入力ページのcgiである自分自身を再び呼び出す方針が思いつきます。

そしてその検索cgiの呼ばれ方での分岐ですが、
県名が未指定のときには
・県名「指定なし」
・市郡「指定なし」←すべての市郡リスト（全国のユーザデータから作成）
と表示し、県名が指定されているときは、
・県名「東京都」
・市郡「指定なし」←東京都の市郡リスト（東京都のユーザデータから作成）
になればいいんですね。
質問にある配列@part1はユーザファイルから読み込んで、
その都度生成するようにします。
どのように読み込んでも高々100レコードなら時間もかからないでしょう。

検索を絞り込む部分については、検索cgiをsearch.cgiとすると、
まず以下のJavaScriptを作っておきます。
function select_prevecture(){
document.forms[0].action="search.cgi" // 自分自身を呼び出す。
document.forms[0].submit
}
これはページのなかのformで実行するcgiを自分自身に変更してsubmitします。
必要なJavaScriptはこれだけでよいでしょう。

次に、県名の選択リストのタグにonChangeオプションをつけておいて、
先ほどのJavaScriptの関数を呼び出すと、
県名を変更したときには、もう一度自分自身を呼び出すようにできます。
<form action="report.cgi" method="POST">
<select name="prefecture" onChange="select_prefecture()">
...
</form>
JavaScript経由でcgiが呼び出されたときは県名が指定されているので、
それにあわせて市郡の選択リストを出力すればよいかと。

いったん画面を書き直すようなってしまうけれど、
ほかの検索条件（業務内容）も引き渡されるので、
defaultの値をそれにしておけば
同一画面で検索しているように振舞うことはできると思います。

ぼくも説明下手なので、わからないところ補足してくださいね。

お礼

いろいろ丁寧に教えてくださってありがとうございました。
おかげで、どうにかできそうな目処がたちました。ヾ(@^▽^@)

回答No.3

y_oku

補足を見てわたしが想像した仕様では、
「ユーザに関係するデータをひっぱってくるだけ」てのをどう実現するかの
見積もりが甘い気がします。

●１．県と市のデータベース構築について。
県←→市の関係は初回はユーザの入力に頼るんですよね。これ。
そうすると未入力の市は市のプルダウンメニューに入っているかどうかわからず、
わざわざ数十のなかから探してみたあとでなかったら、さらに入力？
そしてその入力が正しいかどうかは保証されないですよね。

●２．県を選んだあとデータベースから市を絞り込むところ。
CGIでデータベースから県と市に対応した配列をガーっとhtmlに出力しておいて、
県を選んだ後その市の配列に手を加えるようなJavaScriptを書くのでしょう。
がんばればできる「かも」。

結論としては、１の不確実さと、
１、２の手間（システム構築側の手間、そのときのユーザの入力の手間）を考えると、
どのくらいユーザの手間が効果的に軽減されるかかなり疑問です。

わたしのお奨めは、県名だけプルダウンから選んでもらって、
それ以降の住所はテキストボックスに自分で入力してもらう、
というあたりでしょうか。
県は一度選べばいいし、初回だけ市の名前を入力するって、
そんなに難しいことではないと思います。
あ、ユーザが入力するのって当然最初の1回だけですよね。

あらかじめ郵便番号の「150-0043→東京都渋谷区」のような
データベースがあるのなら、もうちょっと頑張ってもいいけれど。
なにか勘違いしていたらまた補足をしてください。

補足

すいません。説明が悪すぎて・・・
これは、社内でのユーザのデータを社員がみやすくするためのものなのです。ですので、そのデータを入力するのは管理側でしかできないようにしていますし（パスワードかけて）、利用する側は、自分がみたいユーザのデータをのぞければそれでよいのです。で、そのユーザが九州だけとはいえ、数があるので、せめて検索しやすければ・・・と考えているのです。今のままでは、なが～いプルダウンメニューの中から（一応あいうえお表示にはならべていますが）さがさなければなりません。しかも、ユーザ名だけで検索するわけでもなく、いくつかのキーワード（例えば業務内容など）をもたせているので、同じ検索条件のひとつとして考えています。なので、同一画面で、簡単にユーザが絞り込めるような状態にしたいのです。
なにか手がかりがありましたら、アドバイスお願いします。

回答No.2

mnabe

データベースを利用しましょう。

　上記のやり方ですと、出来たとしても遅くて回線状況によっては、タイムアウトエラーになります。

y_oku様がかかれている通り、ソースよりももっと具体的にやりたい事を書いて下さい。
　県を選んだ画面で、市を表示したいのか？
　全部同じ画面で表示したいのか？
　全部違う画面で表示して、前の選択情報は画面に表示するだけでよいのか？
　全部同じ画面でやるとすると、凄く手間ですし、時間もかかると思います。
　違う画面に表示する場合には、そんなに難しくなく出来ますが、インターフェースがちょっと複雑になりますので、ユーザがいる場合には先にそちらの説得が必要になります。

補足

すいません、要領がわるくて・・・

やりたいことは、質問ｇｏｏで、質問をするときに時々表示されている、
カテゴリーで、「コンピュータ」って選んだら、次のプルダウンメニューボックスには、プログラムやＯＳといったものが選べるようになっていて、その次のボックスで、cgiやperlといった項目を選らんでいけるような感じのものを県名から、その関係地域の市や郡といった感じで表示したいのです。

ですので、同一画面でしたいし、ユーザは直接関係なくて、ユーザに関係するデータをひっぱってくるだけなので、それを元に検索できればいいなぁと思っているんですけど・・・

回答No.1

y_oku

まず最初に。
例えば熊本県を選んだらcgiプログラムかJavaScriptかで
熊本市や人吉市は次のselect項目に残すんですよね。
県名→市郡名のデータベースは存在してるんでしょーか。
あらかじめ各県の市や郡を入力するのかなりの手間だと思うんですが。
あらかじめ入力しないで、そのときの入力を保存しておくとか
素敵なことをしようと思うと当社比3倍は難しくなりますが。

んで次に。
県を選ぶところと、市を選ぶところは同じ画面内がいいのか、
別の違う画面でもいいのかってこと。
違う画面っていうのは、最初のCGIの画面では県を選んでsubmitしたら
別のCGIに飛んでそこで市を選ぶという意味です。
同じ画面の中ならば、
JavaScriptのプログラムをhtmlに出力してやらないといけないので、
CGIというよりJavaScriptのプログラムを頑張る感じになるよ。

補足

なんだか質問の仕方がへたっぴですいませんでした。
例えば、福岡県と選んだら、次のプルダウンの中には、そもそも全国の市や郡名が入っている部分の福岡県域の部分のみ表示されて、そこから、セレクトできるものを作成したいのです。
もちろん同一画面がいいのですが・・・
それは、他にも検索条件が表示されているからです。

JavaScriptで、かんがえたほうがいいのでしょうか？