リストボックスを使った検索フォームの作成方法
- リストボックスを使用して、ｇｏｏの質問フォームのような検索フォームを作成したいと思っています。どのようにすれば実現できるのでしょうか？
- リストボックスを２つ設けて、最初のリストボックスから選択した項目に応じて、次のリストボックスに表示する項目を選択したいと思っています。
- 具体的には、例えば最初のリストボックスで「名前」を選んだ場合は次のリストボックスには氏名が表示されるようにしたいです。また、「日付」を選んだ場合は日付が表示されるようにしたいです。どのようにすれば実現できるのでしょうか？
- ベストアンサー
リストボックスを使って検索フォームを作りたいのですが
教えて！ｇｏｏの質問フォームのようなものが作りたいのですが出来なくて困っています。 リストボックスを２つ設けて、最初のリストボックスから選んだ項目によって、次のリストボックスに表示させる項目を選択したいのですが。 例えば、下のlist1のリストボックスから「名前」を選んだ場合にはlist2のリストボックスに氏名を、「日付」を選んだ場合には日付をリストに表示したいですが．．． <SELECT name="list1"><OPTION value=default>検索項目</OPTION> <option value=name>名前</option>); <option value=date>日付</option>); <option value=team>チーム</option>); </SELECT> <SELECT name="list2"><OPTION value=default>氏名</OPTION> <option value=suzuki>鈴木</option>); <option value=sato>佐藤</option>); <option value=tanaka>田中</option>); </SELECT> <SELECT name="list2"><OPTION value=default>日付</OPTION> <option value=2004>2004年度</option>); <option value=2003>2003年度</option>); <option value=2002>2002年度</option>); </SELECT> 書き方や説明が分かりにくいかもしれませんが、よろしくお願いします。
- wipe
- お礼率81% (100/122)
- PHP
- 回答数6
- ありがとう数14
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ファイル構成がわからないのではっきりはいえませんが、 list_change.phpにはjavascriptのソースを <?php fanction ListChange(val) { 省略 } ?> のように記述しているのでしょうか。 このエラーはphpのエラーなので、valに値が入ると ListChange(register) のようになってしまって『$』がないためにエラーが出るといったことが考えられると思います。 javascriptは、以下のように<head>に記述して外部ファイルを使用します。 <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="aaa.js"></script> </head> このようにして、aaa.jsファイルに fanction ListChange(val) { 省略 } と記述すれば関数を使うことができます。 >下のようなソースでlist1，list2のvalueを変数で取得したい とのことですが、この処理の流れは、 list1を選択 → 選択した時点でlocation.hrefを使ってlist1の値を同じファイルに渡す → list1の値を取得してlist2のセレクトを作成 → list2とチェックボックス（必要な場合のみ）を選択 → 検索ボタンを押下 → list1、list2、（todo_check）の値をPOSTで同じファイルに渡す → 渡された値を取得 という流れで良いのでしょうか？ list1とlist2の値をPOSTで取得するには、検索ボタンを同じフォームの中に入れて作れば受け取ることができます。 以下、このような感じで作っているのではと、追加分を含めたソースです。 ファイル構成がわからないと説明しにくいので確認も含めてです。 <?php //list1の値はGETで取得 if ($_GET["list1"]!="") { $list1_val = $_GET["list1"]; } elseif($_POST["list1"]!="") { $list1_val = $_POST["list1"]; } else { $list1_val = "default"; } $list2_val = $_POST["list2"]; $todo_check_val = $_POST["todo_check"]; print_r($list1_val); //値の確認用 print_r($list2_val); //値の確認用 print_r($todo_check_val); //値の確認用 /** list1の値を使ってlist2の配列を取得 セレクトの作成はこの部分かhtml内で行う **/ ?> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="aaa.js"></script> </head> <body> <form name="form" method="post" action="<?php echo $PHP_SELF; ?>"> <table border="1" align="center"> <tr> <td> <div align="center"> <select name="list1" onchange="javascript:ListChange(this.value);"> <option value="default">検索項目</option> <option value="register"<?=($list1_val=="register")?" selected":"";?>>登録者で検索</option> <option value="worker"<?=($list1_val=="worker")?" selected":"";?>>作業者で検索</option> <option value="machine"<?=($list1_val=="machine")?" selected":"";?>>機種名で検索</option> </select> </div> </td> <td> <div align="center"> <!-- ここでlist2の配列からセレクトを作成するか、作成したセレクトを<?=$obj_select?>などとして挿入 --> <select name="list2"> <option>自動で入れ替わります</option> <option value="aaa"<?=($list2_val=="aaa")?" selected":"";?>>aaa</option> <option value="bbb"<?=($list2_val=="bbb")?" selected":"";?>>bbb</option> </SELECT> <!-- セレクト（list2）ここまで --> </div> </td> <td> <div align="center"><input type="checkbox" name="todo_check" value="on"<?=($todo_check_val=="on")?" checked":"";?>>完了したTodoも表示</div> </td> <td> <div align="center"><input type="submit" name="search" value="検索"></div> </td> </tr> </table> </form> </body> </html>
その他の回答 (5)
- caitsith_goo
- ベストアンサー率59% (28/47)
>まず、下のPHPプログラムですが、fanction ListChange(val)に変数を入れるとエラーになります。 >ListChange()のように変数なしでは実行できるのですが．．． 実行できる状況は、 function ListChange() { location.href = '○○.php'; } とやると実行できるが、 function ListChange(val) { location.href = '○○.php?list1='+val; } とやると、『構文エラーです』のようなエラーが出てjavascriptが動かないのでしょうか。 こちらでは特にエラーが出ることはないのですが。。 >JavaScriptの方ですが、文字列の代入を下のようにしましたが表示されませんでした。 >デフォルトの自動で入れ替わりますという文字が消えるだけです。 >もう1つ教えていただいたecho文では構文エラーとなり実行できませんでした。 <php while ($result = mysql_fetch_array($resultId)){ $Name[] = $result[name]; $Value[] = $i; $i++; } ?> まず var name_value = new Array(<?=$Name?>); とやってダメだったことについてですが、 この場合、$Nameは配列ではなく文字列を作る必要があります。 『"aaa", "bbb", "ccc"』という文字列を作って、 var name_value = new Array("aaa", "bbb", "ccc"); と書出すということを行います。 なので、 <?php $i = 0; $Name = ""; while ($result = mysql_fetch_array($resultId)){ $Name .= ($i!=0)?", ":""; $Value .= ($i!=0)?", ":""; $Name .= "\"".$result[name]."\""; $Value .= "\"".$i."\""; $i++; } ?> このようにして文字列を作成します。（文字列があっているかどうかは『print();』などを使って確認してください） この文字列を var name_value = new Array(<?=$Name?>); とすればできるはずです。 また、echoを使うのは<?php ?> で囲っている中でHTMLの書き出しを行う場合に使用するので、HTMLとphpの部分を分けているなら、<?=$Name?>で書出せば大丈夫です。
補足
何度もありがとうございます。 >fanction ListChange(val)に変数を入れるとエラーになります。 >ListChange()のように変数なしでは実行できるのですが．．． ListBox表示のソース上にlist_change.phpをincludeしてファイル内のfunction ListChange(value)を参照するようにしています。 エラーの内容ですが、次のようなメッセージです。 line2 にはfunction ListChange(value) { が宣言されています。 Parse error: parse error, unexpected T_STRING, expecting ')' in C:\Apache2\htdocs\list_change.php on line 2 >JavaScriptの方ですが >この場合、$Nameは配列ではなく文字列を作る必要があります。 無事解決いたしました。動作いたしました。 Arrayとあったので配列だと思い、文字列の配列をつくったのが原因でした。 ここでまた分からない箇所が出たのですが、下のようなソースでlist1，list2のvalueを変数で取得したいのですが、どのようにすればよいのでしょうか？ hiddenや$_POSTなど使って取得したいのですがどうすればよいですか？ リスト表示する項目を選択し、「検索」ボタンを押してください。 <table border="1" align="center"> <tr> <td><div align="center"> <form name="form"> <select name="list1" onchange="listChange()"> <option value="default">検索項目</option> <option value="register">登録者で検索</option> <option value="worker">作業者で検索</option> <option value="machine">機種名で検索</option> </select></div></td> <td><div align="center"><select name="list2"><option>自動で入れ替わります</option> </SELECT></div></td></form> <form method="post" action="<?php echo $PHP_SELF; ?>" > <td><div align="center"><input type="checkbox" name="todo_check" value="on">完了したTodoも表示</div></td> <td><div align="center"><input type="submit" name="search" value="検索"></div></td> </form> </tr> </table> 何度もすいませんが、よろしくお願いします。
- caitsith_goo
- ベストアンサー率59% (28/47)
説明不足で申し訳ありませんでした。 質問の仕方やコンピュータに関する回答をいくつかされていたので、初心者の方ではないような感じがしたので説明を端よってしまいました。 変な意味ではなく、詳しく説明させていただきます。 すでにわかっていることもあるかと思いますがそのときは読み飛ばしちゃってください。 まず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"); 何度もすいませんが、よろしくお願いします。
- taba
- ベストアンサー率61% (349/567)
＞ただ、やはりjavascriptを使わなければ出来ないのでしょうか。 フォームの書き換えは、ユーザー側のブラウザにデータがすべて送られてしまっている以上、javascriptなどユーザー側で動作するプログラムは必須です。 phpで書き換えるためには、ブラウザから情報をサーバーへ送る必要がありますから。 サーバー側だけで処理するには、いったんリスト１だけを画面に表示し、ボタンを押させた上で、次の画面でリスト２を出すしかありません。
お礼
回答ありがとうございます。 javascriptの知識がなく、phpも始めたばかりなので回答の内容を理解するのでせいいっぱいでした。 phpを使うため、ブラウザから情報をサーバーへ送って書き換える手法はないのでしょうか？ まずは、No.1，No.2のコードから動作させてみて、理解を深めていこうと思います。 ありがとうございました。
- caitsith_goo
- ベストアンサー率59% (28/47)
他の方法としては、 <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; } として、○○.phpでlist1の値に対応するlist2のvalueとtextの配列をDBから取得し、このページでセレクトを作成します。 list1で選択した値を使って再度同じページを開き、そのときにlist2を作成するという処理です。 DBから値を取得してセレクトを作成するクラスを作っておくと楽です。 list1を選択した時に、 location.hrefではなくてonChangeでサブミットしてしまう方法もあると思います。 また、 var name_value=newArray("suzuki", "sato", "tanaka"); とするやり方ですが、 DBから取得したデータで、『"suzuki", "sato", "tanaka"』という文字列を作っておいて、 var name_value=newArray(<?=$name_value?>); または echo "var name_value=newArray(".$name_value.");"; とします。
お礼
回答ありがとうございます。 回答の内容が難しく苦戦していました。 あまり簡単な質問を聞いては失礼なので自分なりに考え込んでしまい返答が遅くなりました。 内容は大体わかったつもりでいますが、分からなかった部分を質問させてもらいます。 ○○.phpでlist2のセレクトを作成するということですが、ここで表示もするのいでしょうか？ location.href = '○○.php?list1='+val; のvalはvalueの間違いですか？valでも良いのでしょうか？ function ListChange(val) { location.href = '○○.php?list1='+val; } の関数内に○○.phpのコード内容を直接書いても同じですか？ newArray()への文字列の入力は分かりました。 とても分かりやすい説明でした。ありがとうございました。 よろしくお願いします。
- caitsith_goo
- ベストアンサー率59% (28/47)
このようにするとできます。 配列は自動生成すると楽です。あとはお好みで。。 <html> <head> <title>test</title> <script language="JavaScript"> <!--- function listChange() { var default_ary = new Array("自動で入れ替わります"); var name_text = new Array("鈴木", "佐藤", "田中"); var name_value = new Array("suzuki", "sato", "tanaka"); var data_text = new Array("2004年度", "2003年度", "2002年度"); var data_value = new Array("2004", "2003", "2002"); document.form.list2.length = 0; flag = document.form.list1.value; if (flag=="name") { document.form.list2.length = name_text.length; for(var i=0; i<name_text.length; i++) { document.form.list2.options[i].text = name_text[i]; document.form.list2.options[i].value = name_value[i]; } } if (flag=="date") { document.form.list2.length = data_text.length; for(var i=0; i<data_text.length; i++) { document.form.list2.options[i].text = data_text[i]; document.form.list2.options[i].value = data_value[i]; } } if (flag=="default") { document.form.list2.length = default_ary.length; for(var i=0; i<default_ary.length; i++) { document.form.list2.options[i].text = default_ary[i]; } } } //---> </script> </head> <body> <form name="form"> <select name="list1" onChange="listChange()"> <option value="default">検索項目</option> <option value="name">名前</option>); <option value="date">日付</option>); <option value="team">チーム</option>); </select> <select name="list2"> <option>自動で入れ替わります </select> </form> </body> </html>
お礼
ありがとうございます。 やろうとしていた動作通りに確認できました。 ただ、やはりjavascriptを使わなければ出来ないのでしょうか。 配列の部分はMySQLからデータを呼び出して書き込みます。 SQLで呼び出したデータをどのようにして Varname_value=newArray"suzuki", "sato", "tanaka"); にいれたらいいか分かりません。 教えていただけますか？お願いします。
関連するQ&A
- リストボックス全選択について
JavaScriptについて質問です。 リストボックスA,B と プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、 リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。 下記のソースのように作成したのですが、 リストボックスが全選択されるところまでは良いのですが、 プルダウン項目が最後の項目が選択された状態になってしまいます。 リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。 かなり困ってます。 どなたか助けてください。。 以下ソースです。 <html> <head> <script language="JavaScript"> <!-- function selectAll(){ var str = document.getElementsByTagName("option"); for(i=0;i<str.length;i++){ str[i].selected = true; } } //--> </script> </head> <body> <table> <tr> <td> リストA<br> <select name="listboxA" multiple> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </td> <td> リストB<br> <select name="listboxB" multiple> <option value="サンプル4">サンプル4</option> <option value="サンプル5">サンプル5</option> <option value="サンプル6">サンプル6</option> </select> </td> <td> プルダウンC<br> <select name="Pdown"> <option value="サンプル7">サンプル7</option> <option value="サンプル8">サンプル8</option> <option value="サンプル9">サンプル9</option> </select> </td> </tr> </table> <br> <input type=submit value="送信" onClick="selectAll()"> </body> </html>
- 締切済み
- JavaScript
- リストボックス内の文字について
表題の件ですが、質問があります。 リストボックス内で表示する文字の大きさを変えたいのですが、 どうのようにすればいいのでしょうか？ <select name="year"> <option value="2000">2001</option> <option value="2000">2002</option> <option value="2000">2003</option> </select> 2001,2002,2003の文字を大きくかつ太くしたいです。 宜しくお願い致します。
- ベストアンサー
- HTML
- web上のリストボックス作成
あるHTMLで、リストボックスをDREAMWEAVERでさくせいしました。 リストを選択すると、選択された名前のHTMLに飛ぶように指定したのですが、 ネスケでは動いてくれるのですが、IEでは飛んでくれません. 原因を教えてください。以下のようなHTMLです。 このためのCGIはくんでいません。 <form name="form2"> <select name="month"onChange="MM_jumpMenu('parent',this,0)"size="0"multiple> <option value="1.html"> １ </option> <option value="2.html"> ２ </option> <option value="3.html"> ３ </option> <option value="4.html"> ４ </option> <option value="5.html"> ５ </option> </select> </form>
- ベストアンサー
- HTML
- リストボックスから選択できないのはどうして！？
実はJAVASCRIPTでリストボックス(select1)から会社名を選択するとその下のテキストボックス(link)に そのURLがでるものを作っていたのですが、なぜかリストボックスが選択できない状態になってしまいます。 下のがそのコードなのですが、どなたかわかるかたいらっしゃいませんか？ どうぞよろしくお願いいたします。 <SCRIPT type="text/javascript"> <!-- function aaa() { var a; if((f.select1.value) ="Ａ社") {url = "http://www.a***.co.jp" }; else if((f.select1.value) ="Ｂ社") {url =" http://www.b***.co.jp" }; else if((f.select1.value) ="Ｃ社") {url = "http://www.c***.co.jp" }; else{url = "URLはありません"}; (f.link.value) = url; return } //--> </script> <select onchange = "aaa()" name="select1"> <option value="A社" selected>A社</option> <option value="B社">B社</option> <option value="C社">C社</option> <option value="D社">D社</option> </select> <input type="text" name="link">
- ベストアンサー
- JavaScript
- リストボックスに動的な初期設定値（selected）を与えたい（質問長文）
以下のようなリストボックスで、今日の日付データから「（1年前の）year」と「（今月の）month」の初期設定値を与えようと思うのですが、スマートな方法が思いつきません。 どなたかよい方法を教えてください・・・ <form name="test"> <select name="year"> <option>1997 ・・・（中略） <option>2005</select> 年 <select name="month"> <option value="01">1 ・・・（中略） <option value="12">12</select> 月 </form> <script language="JavaScript"> <!-- function initial(){ 【ここにどのように書くか】 } initial(); //--> </script>
- 締切済み
- JavaScript
- リストボックスを連動させて・・・その２
直前の質問で下記の回答をいただいたものです。 質問では２つのリストボックスを連動させたサンプルの回答をいただきましたが、ひょっとして、リストボックスの個数が何個でも対応させることはできないでしょうか。つまり、リストボックスのnameなどをscript部分に記さずに・・。 ここまでサンプルをもらっても改造できないので質問。 (^^; ■JavaScript <SCRIPT language=JavaScript> <!-- strBase = "test.cgi?hinmei=denwa "; strS1 = "&s1="; strS2 = "&s2="; function set(){ strS1b = strS1 strS2b = strS2 if (document.form.s1.options[document.form.s1.selectedIndex].value) strS1b += document.form.s1.options[document.form.s1.selectedIndex].value; if (document.form.s2.options[document.form.s2.selectedIndex].value) strS2b += document.form.s2.options[document.form.s2.selectedIndex].value; strURL = strBase + strS1b + strS2b; document.form.text.value = strURL; } //--> </SCRIPT> ■フォーム <FORM NAME="form"> <select name="s1" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="big">big</OPTION> <OPTION VALUE="small">small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="red">red</OPTION> <OPTION VALUE="white">white</OPTION> </SELECT> <INPUT TYPE="text" SIZE=50 NAME="text"> </FORM>
- ベストアンサー
- JavaScript
- リストボックスから直接引き金を引く
お世話になります。 早速ですが、 今、あるaplを書いていまして、 処理内容はリストボックスからキーを選択させ、 そのキーでＤＢを検索、表示するというモノです。 現在のロジック、つくりは、 リストボックスの下に（「表示」という）ボタンを設置してあり、 リストボックスからキーを選択した後、 そのボタンを押すことでcgiに戻りＤＢを検索する、 となっています。 <FORM action="./DB.cgi" method="POST"> <div> <select name="key" size="3"> <option value="aaa">aaa <option value="bbb">bbb <option value="ccc">ccc <option value="ddd">ddd <option value="eee">eee <option value="fff">fff </select> </div> <input type=submit value="表示"> <input type="hidden" name="mode" value="display"> </FORM> ここで質問ですが、 リストボックスからキーを選択したらそのままＤＢ検索へ移行するような コードを教えて欲しいのです。 （いちいち表示ボタンを押さなくて良いやり方です） 以上、宜しくお願いします。
- ベストアンサー
- Java
- リストボックスで選択し、CGIを走らせる
リストボックスに <form name='nav'> <select name='selector' size='1' > <option value='default'>---------- <option value='yamada-taro'>山田太郎 という風に、何人もの人名が入っています。 リストボックスの隣には「選択」ボタンがあります。 ボタンを押すと、個人情報の載ったXMLファイルが開く ようになっています。 現在、 <input type='button' value='選択'onclick='renewXML()'> という処理で、検索用関数に飛んでいますが、これを 「選択」ボタンが押されたときに、検索用CGIを走らせる ように変更したいのです。 actionタグを使えばいいのかな？と思っているのですが、 具体的な方法を教えていただきたいのです。 初心者なので質問内容に不備がありましたらお許しください。 なにとぞ、よろしくお願いいたします。
- ベストアンサー
- HTML
- リストメニューに反映させる内容
list.dat 内 $list1,$list2,$list3,$list4,$list5,$name1,$name2,$name3,$name4,$name5, print "<select name=list>\n"; print "<option value="0">未選択</option>\n"; print "<option value="1">$name1</option>\n"; print "<option value="2">$name2</option>\n"; print "<option value="3">$name3</option>\n"; print "<option value="2">$name4</option>\n"; print "<option value="3">$name5</option>\n"; print "</select>\n"; list.dat内のデータをselectメニューに反映させたいのですが、自分の頭ではかなり難しい事のようで、行き詰ってしまいました。 質問の仕方が下手で、どのように書いていいのかわからないのですが、やりたいことは、 $list1の名前が$name1 $list2の名前が$name2 というように、$listと$nameに付けられた数値番号が同一のものがセットになります。 この両方の変数にデーターが入っている場合のみ、セレクトメニューに反映させます。 例えばlist.dat内が $list1,,$list3,,$list5,$name1,$name2,$name3,$name4,, のような場合は、 print "<select name=list>\n"; print "<option value="0">未選択</option>\n"; print "<option value="1">$name1</option>\n"; print "<option value="3">$name3</option>\n"; print "</select>\n"; このようになります。 上のような作りは無理でしょうか？ お力をおかし頂けると幸いです。
- ベストアンサー
- Perl
お礼
いつも回答ありがとうございます。 JavaScriptの方ですが、<?php ?>の外で次のように記述していました。 回答いただいたソースと見比べて、<HEAD></HEAD>がないことに気が付きました。 <script language="JavaScript"> <!--- function listChange() { ・・・・ } //---> </script> また、リストボックスの変数取得の方ですが、リストボックス表示用と変数送信用のformを別々に２つ用意したためうまくいきませんでした。 回答のように１つのformのなかに入れたところ受けることが出来ました。 なんとか目的を達成できました。 何度も本当にありがとうございました。