- ベストアンサー
複数のプルダウンメニューの組み合わから外部リンクを作りたい・・・
複数のプルダウンメニューからそれぞれ組み合わから外部リンクを作りたいのですが、できません。 過去に、こちらで質問されている方がいましたが http://oshiete1.goo.ne.jp/qa3418973.html 回答されている方の様作成したらプルダウンが２個なら上手く動作しました。 やりたいことは、全く上記の方の質問内容と 同じです。 今回、４個のプルダウンメニューで作成したいのですが 上手くいきません・・・ 上記の質問にご回答されていた方のものを 参考にサンプルで作成してみたのですが 動作しません・・・ それと、各プルダウンメニュー内で表示させたい項目が１２あるのですが簡潔にjavascriptの記述ができますでしょうか？ arr[0][0][0]= "http://www.link_0_1.com";・・・・ 以下の行数がとても長くなってしまうので 簡潔にしたいのですが、できますでしょうか？ こちら、javascriptは初心者です。 どうぞ、宜しくお願いします。 ----------------------------------------------------------- <html> <head> <script Language="JavaScript"> <!-- /*** 変数 ***/ // カラー (color) とサイズ (size) インチ(inch）の初期値 var color = 0; var size = 0; var inch = 0; // 二次元配列を定義する。 var arr = new Array(); arr[0] = new Array(); arr[1] = new Array(); arr[2] = new Array(); // arr[色][サイズ][インチ] という指定でリンクする URL が決定する。 arr[0][0][0]= "http://www.link_0_1.com"; arr[0][1][0]= "http://www.link_0_1.com"; arr[0][2][0] = "http://www.link_0_1.com"; arr[1][0][0] = "http://www.link_0_1.com"; arr[1][1][0] = "http://www.link_0_1.com"; arr[1][2][0] = "http://www.link_0_1.com"; arr[2][0][0] = "http://www.link_0_1.com"; arr[2][1][0] = "http://www.link_0_1.com"; arr[2][2][0] = "http://www.link_0_1.com"; arr[0][1][0] = "http://www.link_0_1.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 set_inch(selected_option) { inch = selected_option.selectedIndex; print_link_url(); } function print_link_url() { document.form1.link_url.value = arr[color][size][inch]; } function jump() { location.href = arr[color][size][inch]; } // --> </script> </head> <body> <form name="form1" method="GET"> カラー: <select onChange="set_color(this)"> <option value="赤">赤</option> <option value="青">青</option> <option value="黄">黄</option> </select> サイズ: <select onChange="set_size(this)"> <option value="Ｌ">Ｌ</option> <option value="Ｍ">Ｍ</option> <option value="Ｓ">Ｓ</option> </select> サイズ: <select onChange="set_inch(this)"> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> </select> <br> <input type="button" value="検索" onClick="jump()"> <br> </form> </body> </html>
- Keison08
- お礼率100% (7/7)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>・・・は必ず必要なのでしょうか？ 元のソースを活かした方がよいかなとおもってそうしたのですが、 やっぱとっちゃってよかったのですね？ ではこんな感じにしてください <html> <head> <script language="JavaScript"> goods = new Object(); goods[0] =new setGoods("http://www.link_00.com","red","L",11); goods[1] =new setGoods("http://www.link_01.com","red","L",12); goods[2] =new setGoods("http://www.link_02.com","red","L",13); goods[3] =new setGoods("http://www.link_03.com","red","M",11); function setGoods(url,color,size,inch){ this.url=url; this.color=color; this.size=size; this.inch=inch; } function searchURL(){ var colorValue=document.getElementById("color").value; var sizeValue=document.getElementById("size").value; var inchValue=document.getElementById("inch").value; var url=document.getElementById("link_url"); for(var i in goods){ if(goods[i].color==colorValue && goods[i].size==sizeValue && goods[i].inch==inchValue){ return goods[i].url; } } return false; } function jump(){ var url=searchURL(); if(!url){ alert("該当商品はありません"); return false; } location.href=url; return false; } </script> </head> <body> <form method="GET"> カラー: <select id="color"> <option value="red">赤 <option value="blue">青 <option value="yellow">黄 </select> サイズ: <select id="size"> <option value="L">Ｌ <option value="M">Ｍ <option value="S">Ｓ </select> インチ: <select id="inch"> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> </select> <br> <input type="submit" onClick="return jump()"><br> </form> </body> </html>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
飛び先と選択子の関係しだいで、効率的なスクリプト、簡潔なデータ(飛び先と組み合わせの関係)の書き方なんかも変わってきます。 パターン１ 選択子の組み合わせで飛び先が全て違う。 全ての選択肢の組み合わせがあり。 パターン２ 選択子の組み合わせで飛び先が全て違う。 存在しない組み合わせもある。 パターン３ 飛び先は選択子の組みあわせの数より少ない。 全ての組み合わせはあり。 パターン４ 飛び先は選択子の組みあわせの数より少ない。 存在しない組み合わせもある。 まぁ、いくつかのパターンはある程度汎用的なスクリプトでまかなえますけど。 また、パターン１でさらに飛び先ってのが選択子を単純に結合するだけで決められる （赤・Ｓ・11の組み合わせなら 必ずred_s_11.htmlになるとか。） ならかなり簡単にできます。 逆に、どんな感じでデー部分が書ければ楽になるか、って事を提示してもらった方が、スクリプトの書き方を決めやすいかな。 #1さんのデータの書き方で充分なのか、もう少しまとめたいとか。
お礼
steel_gray 様 早速のご回答ありがとうございます！ 本当に仰るとおりですね。 リンク先のページが絶対的に確定しているので あれば、問題ないのでしょうが、 恐らくデータをひっぱてきて 検索して、リンクページにジャンプする形になるかと 思います。 今後の参考になりました。 現段階では、試験的に作成するページですので 質問した内容で制作するしかないのです・・・ 曖昧な質問で本当にすみません。 それにも関わらず、ご回答いただき 大変ありがとうございました！
- yambejp
- ベストアンサー率51% (3827/7415)
配列で管理するのには限界がありますね。 こんな風に明示的に値を指定したオブジェクトを作成して 管理してみるとよいでしょう。 たとえば指定していな色に白を選ぶと、該当なしと表示されます 特定の色にサイズがSしかないとか、そういう場合に有効です <html> <head> <script language="JavaScript"> goods = new Object(); goods[0] =new setGoods("http://www.link_00.com","red","L",11); goods[1] =new setGoods("http://www.link_01.com","red","L",12); goods[2] =new setGoods("http://www.link_02.com","red","L",13); goods[3] =new setGoods("http://www.link_03.com","red","M",11); goods[4] =new setGoods("http://www.link_04.com","red","M",12); goods[5] =new setGoods("http://www.link_05.com","red","M",13); goods[6] =new setGoods("http://www.link_06.com","red","S",11); goods[7] =new setGoods("http://www.link_07.com","red","S",12); goods[8] =new setGoods("http://www.link_08.com","red","S",13); goods[9] =new setGoods("http://www.link_09.com","blue","L",11); goods[10]=new setGoods("http://www.link_10.com","blue","L",12); goods[11]=new setGoods("http://www.link_11.com","blue","L",13); goods[12]=new setGoods("http://www.link_12.com","blue","M",11); goods[13]=new setGoods("http://www.link_13.com","blue","M",12); goods[14]=new setGoods("http://www.link_14.com","blue","M",13); goods[15]=new setGoods("http://www.link_15.com","blue","S",11); goods[16]=new setGoods("http://www.link_16.com","yellow","S",12); goods[17]=new setGoods("http://www.link_17.com","yellow","S",13); goods[18]=new setGoods("http://www.link_18.com","yellow","L",11); goods[19]=new setGoods("http://www.link_19.com","yellow","L",12); goods[20]=new setGoods("http://www.link_20.com","yellow","L",13); goods[21]=new setGoods("http://www.link_21.com","yellow","M",11); goods[22]=new setGoods("http://www.link_22.com","yellow","M",12); goods[23]=new setGoods("http://www.link_23.com","yellow","M",13); goods[24]=new setGoods("http://www.link_24.com","yellow","S",11); goods[25]=new setGoods("http://www.link_25.com","yellow","S",12); goods[26]=new setGoods("http://www.link_26.com","yellow","S",13); function setGoods(url,color,size,inch){ this.url=url; this.color=color; this.size=size; this.inch=inch; } function searchURL(){ var colorValue=document.getElementById("color").value; var sizeValue=document.getElementById("size").value; var inchValue=document.getElementById("inch").value; var url=document.getElementById("link_url"); for(var i in goods){ if(goods[i].color==colorValue && goods[i].size==sizeValue && goods[i].inch==inchValue){ url.value=goods[i].url; return true; } } url.value=""; return false; } function jump(){ var url=document.getElementById("link_url"); if(url.value==""){ alert("該当商品はありません"); return false; } location.href=url.value; return false; } </script> </head> <body> <form method="GET"> カラー: <select id="color" onChange="searchURL()"> <option value="red">赤 <option value="blue">青 <option value="yellow">黄 <option value="white">白 </select> サイズ: <select id="size" onChange="searchURL()"> <option value="L">Ｌ <option value="M">Ｍ <option value="S">Ｓ </select> インチ: <select id="inch" onChange="searchURL()"> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> </select> <br> <input type="text" id="link_url" size="30" value="http://www.link_00.com"><br> <input type="submit" onClick="return jump()"> <br> </form> </body> </html>
お礼
↑間違って記入してしまいました。 yambejp 様 早速のご回答ありがとうございます！ 確かに、今回のボリュームでの作成は面倒ですね・・・ 現段階では、javascriptのみで対応で作成しておりますが 恐らくゆくゆくは、cgiと連動で作成すると思います。 それと、 <input type="text" id="link_url" size="30" value="http://www.link_00.com"><br> は必ず必要なのでしょうか？ これを表示せずに作成はできますでしょうか？ 外してみると、動作いたしません。 見栄え的に無い方がいいのですが・・・ お願いいたします。
補足
yambejp 様 早速のご回答ありがとうございます！ 確かに、今回のボリュームでの作成は面倒ですね・・・ 現段階では、javascriptのみで対応で作成しておりますが 恐らくゆくゆくは、cgiと連動で作成すると思います。 それと、 <input type="text" id="link_url" size="30" value="http://www.link_00.com"><br> は必ず必要なのでしょうか？ これを表示せずに作成はできますでしょうか？ 外してみると、動作いたしません。 見栄え的に無い方がいいのですが・・・ お願いいたします。
お礼
yambejp 様 本当に、ありがとうございます！ 早速これで作成させていただきます！ 非常に助かりました！ とても、曖昧な質問にもかかわらず 早急にご回答いただき 大変ありがとうございました！