プルダウン選択の連動

質問

6桁の数字を3つのプルダウンで表現しようと思います。1つ目の2桁の選択によって2つ目のプルダウンの数値が変更され、さらに2つ目のプルダウンの選択により3つ目のプルダウンの選択が変更される・・・。とても難しくてうまくいかないです。これってJavaScriptですかね？とても困っています教えてください！

回答No.4

yambejp · ベストアンサー

＃２です

参考までにソースを書いてみました。
オラクルのsql文はよくわからないので適当です。
ホンチャンでは連想配列への代入のところはSQLで処理します。

＃２でも書きましたが、各selectはonChangeでsubmitするだけの
処理をいれておくと、最悪javascriptが動かなくてもsubmitを
手動でできるため、汎用性があります。
Ajaxで検討なさるのであれば、回答は識者におまかせします。

<?PHP

//都道府県の設定
$a_todohuken=array("tokyo"=>"東京","osaka"=>"大阪","other"=>"その他");
$head="<hr><a href=\"".$PHP_SELF."\">検索</a>>";
$todohuken_options="";
foreach ($a_todohuken as $key => $val){
if($key==$_GET["todohuken"]) $selected="selected";
else $selected="";
$todohuken_options.= "<option value=\"".$key."\" ".$selected.">".$val."\n";
}

if($_GET["todohuken"]!=""){
$query="SELECT `city_id`,`city_name` FROM `city_table` WHERE `todohuken`='".$_GET["todohuken"]."';";
//SQL処理して$a_cityに配列でうける
$head.="<a href=\"".$PHP_SELF."?todohuken=".$_GET["todohuken"]."\">".$a_todohuken[$_GET["todohuken"]]."</a>>";
if($_GET["todohuken"]=="tokyo") $a_city=array("shinjuku"=>"新宿区","shibuya"=>"渋谷区","other"=>"その他");
if($_GET["todohuken"]=="osaka") $a_city=array("osaka"=>"大阪市","sakai"=>"堺市","other"=>"その他");
$city_options="";
if(is_array($a_city)){
foreach ($a_city as $key => $val){
if($key==$_GET["city"]) $selected="selected";
else $selected="";
$city_options.= "<option value=\"".$key."\" ".$selected.">".$val."\n";
}
}

}
if($a_city[$_GET["city"]]=="") $_GET["city"]="";

if($_GET["city"]!=""){
$query="SELECT `station_id`,`station_name` FROM `station_table` WHERE `city`='".$_GET["city"]."';";
//SQL処理して$a_stationに配列でうける
$head.="<a href=\"".$PHP_SELF."?todohuken=".$_GET["todohuken"]."&city=".$_GET["city"]."\">".$a_city[$_GET["city"]]."</a>>";
if($_GET["city"]=="shibuya") $a_station=array("shibuya"=>"渋谷","yoyogi"=>"代々木","ebisu"=>"恵比寿");
if($_GET["city"]=="shinjuku") $a_station=array("shinjuku"=>"新宿","shinokubo"=>"新大久保","takadanababa"=>"高田馬場");
if($_GET["city"]=="osaka") $a_station=array("shinosaka"=>"新大阪","umeda"=>"梅田","nanba"=>"難波");
if($_GET["city"]=="sakai") $a_station=array("sakaishi"=>"堺市","nakamozu"=>"中百舌鳥","minato"=>"湊");
$station_options="";
if(is_array($a_station)){
foreach ($a_station as $key => $val){
if($key==$_GET["station"]) $selected="selected";
else $selected="";
$station_options.= "<option value=\"".$key."\" ".$selected.">".$val."\n";
}
}

}
if($a_station[$_GET["station"]]=="") $_GET["station"]="";

if($_GET["station"]!=""){
$query="SELECT `etc_info` FROM `info_table` WHERE `statition`='".$_GET["station"]."';";
//print $query."<br>";
//SQL処理して駅の情報を得て、表示する
$head.=$a_station[$_GET["station"]].">";
$body.=<<<eof
情報を表示する
<hr>
eof;
}
$head.="<hr>";
$body.=<<<eof
<form action="$PHP_SELF" method=get>
<select name="todohuken" onChange="this.form.submit()">
<option value="">======県名=======
$todohuken_options
</select>
<select name="city" onChange="this.form.submit()">
<option value="">======市名=======
$city_options
</select>
<select name="station" onChange="this.form.submit()">
<option value="">======駅名=======
$station_options
</select>
<input type="submit" value="search">
</form>
eof;
print $head;
print $body;
//phpinfo();
?>

回答No.3

akanekor

どちらかというと、Ajaxの方が最適なパターンだよな。
非同期通信で、画面再描画もせずに、選択された項目を元にＤＢから検索してきて、リストのデータだけ更新可能。

難易度、格段に上がるけどね（＝－＝；

回答No.2

yambejp

これはあきらかにPHPの領分ですね。
もちろんjavascriptでも書けないことはないですが
すべての都市名、市名、駅名をhtmlに書いておく
必要があり、膨大な量のデータのhtmlになります。
その手のデータを管理するのはsqlにまかせ、
phpをつかって必要なときにデータを呼び出せばよい
でしょう。

具体的には一番左のselectで選択したらonChange
イベントで、submitし、そのデータをもとにsqlで
検索、結果として真中のselectに選択肢を表示
というながれになります。
（javascriptが使えないクライアントのために
submitも用意しておいた方がベター）

PHPを前提にこんな感じ
print <<<eof
<form action="$PHP_SELF" method=get>
<select name="todohuken" onChange="this.form.submit()">
<option value="">======県名=======
<option value="tokyo">東京
<option value="osaka">大阪
</select>
<select name="city" onChange="this.form.submit()">
<option value="">======市名=======
</select>
<select name="station" onChange="this.form.submit()">
<option value="">======駅名=======
</select><br>
<input type="submit" value="search">
</form>
eof;

ここで$_GET["todohuken"]の値を元に
オラクルからcityの情報を受け取り、データを流し
こめばいけると思います。
（いくつか課題はありますが、やってくなかで解決
してください）

補足

すみません。上記の書き方だとJavaScriptの関数を設定しなくていいんですか？（読みに行く）素人でそれぞれの項目でOnChangeの設定をするのかな？と思っていました。もうパニック状態です。

回答No.1

yambejp

6桁を３つのプルダウンだったら、１つめの２桁で
2つ目の数値が変更されることはないでしょう？
どういうような仕様を想定しているのかもっと
ハッキリさせないと回答のしようがないかと。

たとえば１つ目のプルダウンは００から９９まで
100個の選択肢なのでしょうか？
２つめと３つめはどうなんでしょう？
１つめと連動して２つめ、３つめはどうすれば
いいのでしょう？

補足

変な聞き方をしてしまいました。申し訳ないです。Oracleからデータを引き出して、PHPで書いています。今回の件はJavaScriptかな？と思っています。例えば一つ目のプルダウンが都道府県で「大阪府」を選択したら2つ目のプルダウンで都市名が「大阪市」「堺市」・・・となり3つ目のプルダウンでそこの町にある駅名を表示する・・・あのイメージなのですが。どうやったら良いのでしょうか・教えて下さい。
何分経験浅いものですから細かく教えていただければうれしいです。