- ベストアンサー
二つのプルダウンメニューからそれぞれ組み合わの外部リンクを作りたいのですが
HP作成初心者です。 いろいろ検索したのですが検索の仕方が悪いのかよくわからないので ご教授お願いいたします。 二つのプルダウンメニューを作り、各項目を選択し GOボタンを押してそれぞれ選択した項目に当てはまるリンクへって感じで作成したいのですが。 例 服の色 赤 青 黄 サイズ Ｌ Ｍ Ｓ それぞれを選択しGOボタンで選択項目にあったリンクへ どうぞ宜しくお願いいたします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 では、コードをプレゼント。 ユーザの操作により、現在のリンク先がどこになっているのかが分かるよう、textbox に表示されるようになっています。 http://○○○ のリンク先などは適切な値を設定して下さい。 javascript の多次元配列については、参考 URL をご覧下さい。 <html> <head> <script Language="JavaScript"> <!-- /*** 変数 ***/ // カラー (color) とサイズ (size) の初期値 var color = 0; var size = 0; // 二次元配列を定義する。 var arr = new Array(); arr[0] = new Array(); arr[1] = new Array(); arr[2] = new Array(); // arr[色][サイズ] という指定でリンクする URL が決定する。 arr[0][0] = "http://www.link_0_0.com"; arr[0][1] = "http://www.link_0_1.com"; arr[0][2] = "http://www.link_0_2.com"; arr[1][0] = "http://www.link_1_0.com"; arr[1][1] = "http://www.link_1_1.com"; arr[1][2] = "http://www.link_1_2.com"; arr[2][0] = "http://www.link_2_0.com"; arr[2][1] = "http://www.link_2_1.com"; arr[2][2] = "http://www.link_2_2.com"; /*** 関数 ***/ function set_color(selected_option) { color = selected_option.selectedIndex; print_link_url(); } function set_size(selected_option) { size = selected_option.selectedIndex; print_link_url(); } function print_link_url() { document.form1.link_url.value = arr[color][size]; } function jump() { location.href = arr[color][size]; } // --> </script> </head> <body> <form name="form1" method="GET"> カラー: <select onChange="set_color(this)"> <option>赤 <option>青 <option>黄 </select> サイズ: <select onChange="set_size(this)"> <option>Ｌ <option>Ｍ <option>Ｓ </select> <br> <input type="text" id="link_url" size="30" value="http://www.link_0_0.com"> <br> <input type="submit" onClick="jump()"> <br> </form> </body> </html>
その他の回答 (4)
- Redpython
- ベストアンサー率56% (9/16)
こんにちは。 Javascript の経験はございますか？ ユーザの操作により内容が変わり、かつ、サーバ内での処理を必要としないページを作成するのであれば、Javascript で組むことをお勧めします。 ユーザが項目を選択したら Javascript のコード内の変数の値が変わるようにしておきます。そして、GO ボタンクリックでリンク先をその値に飛ばせば実現できます。 参考 URL のフォームあたりをご参照くださいませ。
補足
ありがとうございます。 javascriptの経験はほとんどありません・・。 HP情報ありがとうございます。 素人には難しいですね（汗
- chaimasuka
- ベストアンサー率57% (26/45)
それは、セレクトボックスではないでしょうか。 質問の例ならば、以下のような感じで <form action="exemple.cgi" method="post"> <select name="color"> <option value="red">赤</option> <option value="blue">青</option> <option value="yellow">黄</option> </select> <select name="size"> <option value="L">L</option> <option value="M">M</option> <option value="S">S</option> </select> <input type="button" value="GO" /> </form> action でpostするcgiなどのサーバサイドプログラムが必要ですが。
補足
ありがとうございます。 セレクトボックスって言うんですね。 これにリンク先を記述する場合はどういう風にしたらいいんでしょうか？ 質問ばかりですみません。 宜しくお願いいたします。
- ICHI-yan
- ベストアンサー率33% (45/134)
プルダウンの意味がちょっと違うようなので、確認です。 赤を押したりマウス乗せたりするとサイズのメニューが出てきて選んで飛ぶというのが一般的にプルダウンメニューと呼ばれているものです。 それなら「プルダウンメニュー」で検索されると沢山作り方が出てきます。javascriptやcssといった技術も一緒に入れてもいいです。 そうじゃなくて、もともと２つ表があってチェックして、goを押すとそこに飛ぶというのであれば 「チェックボックス」または「ラジオボタン」を検索されれば、ボタンの作り方とその後の処理の仕方、または仕方のヒントがでてくると思います。
補足
ありがとうございます。 プルダウンメニュー（ドロップダウン）で間違いないです。 メニュー選択後すぐ飛ぶメプルダウンの方が多いかもしれませんが GOボタンを選択して飛ぶプルダウンメニューもありますよね？ 後者の方のプルダウンメニューを利用したいと思っています。 ２つプルダウンメニューを利用してそれぞれ選択した 項目に当てはまるリンクへ 例 服の色 赤を選択 サイズ Lを選択 GOボタンで赤でLサイズの服のリンクへ って感じです。 説明がわかりにくくて申し訳ないですが、宜しくお願い致します。
- As2022
- ベストアンサー率0% (0/1)
それを実現するためには、 それらのデータをフォームでphpやcgiファイルに送って、 そこで送られて来たデータを処理して画面に出力する という方法があると思います javascriptを使っても作れます こういう回答が必要じゃなかったらすいません
補足
ありがとうございます。 できればjavascriptを使用したいのですが 詳しくないので、参考になるHPなどご存じないでしょうか？ もしくは上記の例で結構ですのでソースを記述して いただけると、とても助かるのですが。 宜しくお願い致します。
お礼
。
補足
お返事遅くなり申し訳ございません。 コードまで記載していただいてとても助かります。 HPを参考にしながらコツコツと勉強していきたいと思います。 ありがとうございました！