複数のプルダウンメニューの組み合わから外部リンクを作りたい・・・

解決済

質問者：Keison08
質問日時：2007/11/12 18:59
回答数：3件

複数のプルダウンメニューからそれぞれ組み合わから外部リンクを作りたいのですが、できません。

過去に、こちらで質問されている方がいましたが
http://oshiete1.goo.ne.jp/qa3418973.html
回答されている方の様作成したらプルダウンが２個なら上手く動作しました。

やりたいことは、全く上記の方の質問内容と
同じです。
今回、４個のプルダウンメニューで作成したいのですが
上手くいきません・・・

上記の質問にご回答されていた方のものを
参考にサンプルで作成してみたのですが
動作しません・・・

それと、各プルダウンメニュー内で表示させたい項目が１２あるのですが簡潔にjavascriptの記述ができますでしょうか？

arr[0][0][0]= "http://www.link_0_1.com";・・・・
以下の行数がとても長くなってしまうので
簡潔にしたいのですが、できますでしょうか？

こちら、javascriptは初心者です。

どうぞ、宜しくお願いします。
-----------------------------------------------------------
<html>
<head>
<script Language="JavaScript">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2007/11/12 22:42

>・・・は必ず必要なのでしょうか？

元のソースを活かした方がよいかなとおもってそうしたのですが、
やっぱとっちゃってよかったのですね？
ではこんな感じにしてください

<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>

- 0
- 件

通報する

この回答へのお礼

yambejp　様

本当に、ありがとうございます！

早速これで作成させていただきます！
非常に助かりました！

とても、曖昧な質問にもかかわらず
早急にご回答いただき
大変ありがとうございました！

通報する

お礼日時：2007/11/12 23:04

No.2

回答者： steel_gray
回答日時：2007/11/12 22:18

飛び先と選択子の関係しだいで、効率的なスクリプト、簡潔なデータ(飛び先と組み合わせの関係)の書き方なんかも変わってきます。

パターン１
　選択子の組み合わせで飛び先が全て違う。
　全ての選択肢の組み合わせがあり。
パターン２
　選択子の組み合わせで飛び先が全て違う。
　存在しない組み合わせもある。
パターン３
　飛び先は選択子の組みあわせの数より少ない。
　全ての組み合わせはあり。
パターン４
　飛び先は選択子の組みあわせの数より少ない。
　存在しない組み合わせもある。

まぁ、いくつかのパターンはある程度汎用的なスクリプトでまかなえますけど。
また、パターン１でさらに飛び先ってのが選択子を単純に結合するだけで決められる
（赤・Ｓ・11の組み合わせなら必ずred_s_11.htmlになるとか。）
ならかなり簡単にできます。

逆に、どんな感じでデー部分が書ければ楽になるか、って事を提示してもらった方が、スクリプトの書き方を決めやすいかな。
#1さんのデータの書き方で充分なのか、もう少しまとめたいとか。

- 0
- 件

通報する

この回答へのお礼

steel_gray 様

早速のご回答ありがとうございます！

本当に仰るとおりですね。
リンク先のページが絶対的に確定しているので
あれば、問題ないのでしょうが、
恐らくデータをひっぱてきて
検索して、リンクページにジャンプする形になるかと
思います。

今後の参考になりました。

現段階では、試験的に作成するページですので
質問した内容で制作するしかないのです・・・

曖昧な質問で本当にすみません。
それにも関わらず、ご回答いただき
大変ありがとうございました！

通報する

お礼日時：2007/11/12 23:01

No.1

回答者： yambejp
回答日時：2007/11/12 20:00

配列で管理するのには限界がありますね。

こんな風に明示的に値を指定したオブジェクトを作成して
管理してみるとよいでしょう。

たとえば指定していな色に白を選ぶと、該当なしと表示されます
特定の色にサイズが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>
は必ず必要なのでしょうか？
これを表示せずに作成はできますでしょうか？

外してみると、動作いたしません。
見栄え的に無い方がいいのですが・・・

お願いいたします。

補足日時：2007/11/12 21:56

通報する

- 0
- 件

通報する

この回答へのお礼

↑間違って記入してしまいました。

yambejp　様
早速のご回答ありがとうございます！
確かに、今回のボリュームでの作成は面倒ですね・・・

現段階では、javascriptのみで対応で作成しておりますが
恐らくゆくゆくは、cgiと連動で作成すると思います。

それと、
<input type="text" id="link_url" size="30" value="http://www.link_00.com"><br>
は必ず必要なのでしょうか？
これを表示せずに作成はできますでしょうか？

外してみると、動作いたしません。
見栄え的に無い方がいいのですが・・・

お願いいたします。