リストボックスを使った検索フォームの作成方法

質問

• リストボックスを使用して、ｇｏｏの質問フォームのような検索フォームを作成したいと思っています。どのようにすれば実現できるのでしょうか？
• リストボックスを２つ設けて、最初のリストボックスから選択した項目に応じて、次のリストボックスに表示する項目を選択したいと思っています。
• 具体的には、例えば最初のリストボックスで「名前」を選んだ場合は次のリストボックスには氏名が表示されるようにしたいです。また、「日付」を選んだ場合は日付が表示されるようにしたいです。どのようにすれば実現できるのでしょうか？

回答No.4

caitsith_goo

説明不足で申し訳ありませんでした。
質問の仕方やコンピュータに関する回答をいくつかされていたので、初心者の方ではないような感じがしたので説明を端よってしまいました。
変な意味ではなく、詳しく説明させていただきます。
すでにわかっていることもあるかと思いますがそのときは読み飛ばしちゃってください。

まずNo.2の返信についてです。
>○○.phpでlist2のセレクトを作成するということですが、ここで表示もするのいでしょうか？
今回作成しようとしているのは、htmlとphpとjavascriptを同じファイルに記述していますか？
だとすれば、list1の値を同じファイルに渡してlist2を作成するということで大丈夫です。

>location.href = '○○.php?list1='+val;
>のvalはvalueの間違いですか？valでも良いのでしょうか？
<select name="list1" onChange="ListChange(this.value)">
このセレクトボックスを選択した（違うのを選んだ）時に、
function ListChange(val) {
location.href = '○○.php?list1='+val;
}
この関数を実行するという処理になります。

このとき、onChange="ListChange(this.value)"
とありますが、ListChangeの関数に対して『this.value』という値を渡しています。
『this.value』とは、関数が実行されるときのセレクトボックスの値を示していて、これによってそのときの値を関数に渡すことができます。

関数の記述は
function ListChange(val) {
となっていますが、括弧の中にある『val』は渡されてきた値を表します。
この『val』は関数内で使用される変数で、渡された値をこの関数内ではこのように処理するという意味で使われます。
そのため、テキストボックスやチェックボックスからなど、どんな値がきても関係なく関数を汎用的に使うことができます。
この変数は宣言する必要がなく、自分のわかりやすい名前をつけることができます。
『select_value』でも『atai』でもなんでもいいです。

>の関数内に○○.phpのコード内容を直接書いても同じですか？
location.href = ○○
というのは、HTMLの<a>タグと同じ働きをして、
この関数が実行されたときに記述されているファイルにジャンプするという処理をします。
ジャンプするときにlist1の値を一緒に渡してほしいので
location.href = '○○.php?list1='+val;
という記述をしています。（valについては上記参照）
そのため、コード内容を書くのではなく、ジャンプしたいファイル名を記述することになります。

No.3の方への返信にあった、
>phpを使うため、ブラウザから情報をサーバーへ送って書き換える手法はないのでしょうか？
という質問に対しては、
No.3の方が回答した、
『サーバー側だけで処理するには、いったんリスト１だけを画面に表示し、ボタンを押させた上で、次の画面でリスト２を出すしかありません。』
という方法があります。

この方法の説明です。
list1で選択→サブミットボタンを押して同一ファイルに値を渡す→list1の値を取得してlist2を作成　という流れになります。
<form action="○○.php" method="POST">
<select name="list1">
省略
</select>
<input type="submit">
</form>
と記述することで動作できます。

この方法はjavascriptを使って少し変化させることができて、
<form name="f1" action="○○.php" method="POST">
<select name="list1">
省略
</select>
<input type="button" onClick="DataSend()">
</form>

function DataSend() {
document.f1.submit();
}
とすることで同じ動作をさせることができます。

僕がNo2.で回答した、
『list1を選択した時に、
location.hrefではなくてonChangeでサブミットしてしまう方法もあると思います。』
という方法は、上の方法をさらに変形させたようなもので、
list1を選択した時点でonChange="DataSend()"を使って、ボタンを押さないで同じ処理を行う方法です。

list2を変化させるという点ではどれも同じ結果が出るのですが、それぞれの使い分け方を説明します。
No.1の方法を方法１。
No.3の方法を方法２。
No.2の２つの方法とNo.3の方の変形させた方法をまとめて方法３。
とします。

方法１：
画面を新たに読み込んだりしないため、セレクトボックス以外にテキストボックスなどの入力フォームがあった場合に、すでにユーザーが記入した値はそのまま残ります。
javascriptを使うので閲覧するマシンの状況で動かない場合があります。
ブラウザによってjavascriptの記述を変化させる必要があるかもしれないのでその確認が必要となります。

方法２：
サブミットさせるだけなのでjavascriptの対応などは関係ありません。
しかし、すでに入力されている値なども受け取ってから再度フォームに埋め込む必要があります。（そんなに面倒ではないですが）

方法３：
javascriptは使用しますが、ブラウザ間で記述を変化させる必要はまずありません。
javascriptを禁止されていない限り問題ないです。
入力されている値の受け渡しが少し手間です。（ただ記述が多くなるというだけですが）
なら方法２のほうがいいだろうという感じですが、いいところは
方法２はサブミットボタンを押してサブミットさせる。
方法３はボタンを押す。セレクトを選択する。といった動作を行ったときに処理を実行してサブミットさせる。
という違いがあり、サブミットさせるまでの間に色々な処理を入れやすいことがあります。
アラートを出すとか、計算するとか。。。

実は方法２でもサブミットさせる前に処理を入れることはできるのですが、ちょっぴり難しい感じなので。
（return・true・falseを使いこなせるなら問題ないです）

このような感じで使い分けができると思います。

以上長文失礼いたしました。
参考になればと思います。またよろしくお願いします。

補足

ありがとうございます。

自分のプログラムに移したところ、わからないところがあります。
まず、下のPHPプログラムですが、fanction　ListChange(val)に変数を入れるとエラーになります。
ListChange()のように変数なしでは実行できるのですが．．．

<select name="list1" onChange="ListChange(this.value)">
<option value="default">検索項目</option>
<option value="name">名前</option>);
<option value="date">日付</option>);
<option value="team">チーム</option>);
</select>

function ListChange(val) {
location.href = '○○.php?list1='+val;
}

JavaScriptの方ですが、文字列の代入を下のようにしましたが表示されませんでした。
デフォルトの自動で入れ替わりますという文字が消えるだけです。
もう1つ教えていただいたecho文では構文エラーとなり実行できませんでした。

<php
while ($result = mysql_fetch_array($resultId)){
$Name[] = $result[name];
$Value[] = $i;
$i++;
}
?>

<script language="JavaScript">
<!---
function listChange() {
var default_ary = new Array("自動で入れ替わります");
//var name_text = new Array("鈴木", "佐藤", "田中");
var name_value = new Array(<?=$Name?>);
//var name_value = new Array("suzuki", "sato", "tanaka");
var name_value = new Array(<?=$Value?>);
var machine_text = new Array("FZ2181", "FZ5180", "FZ-10");
var machine_value = new Array("2181", "5180", "10");

何度もすいませんが、よろしくお願いします。