JavaScript Form OPTION value

質問

JavaScript初心者です。

FormとJavaScriptでしたいことがあるのですが、
知識がなくて困っています。わかる方いましたら
ご教授くださいm(_ _)m

（ショッピングカートの）フォームのオプション選択の
ドロップダウンメニューで、オプションを選択すると
それに反応して、その横に配置した画像を変える～
という事がしたいです。

以下のURLにサンプルを見つけて、これと同じことがしたい！
と思ったのですが…

■ドロップダウンメニューで画像が変わる（JavaScript）
http://www.mdn.co.jp/webcre/Tips/Vol12/js_imagechange02.html

このサンプルではフォームの　OPTION　value
に0などナンバリングをしておいて、Javascriptで

if(fname==0){document.imgsmp.src=img0.src;}

など数字を指定して読み込むようになっていますが、
自分の環境の場合、フォームのオプション選択ごとに
価格を変えるため、OPTION valueに、

OPTION value="グリーン,3000"

というようにオプション名と追加価格を記入しています。
こういった場合、どの用にしたらいいのでしょうか？

自分のフォームのソースの一部を以下に書きます。

--------------------Form-----------------------------

<INPUT type="hidden" class="select_erea" name="option_price_name" value="オプション名">
<SELECT name="option_price" size="15" >
<OPTION value="レッド,1000">レッド</OPTION>
<OPTION value="オレンジ,2000">オレンジ</OPTION>
<OPTION value="グリーン,3000">グリーン</OPTION>
</SELECT>

-----------------------------------------------------

質問も初めてなので、至らない点が多々あるかと思いますが、
よろしくお願いします。

回答No.4

arexis · ベストアンサー

とりあえず、そのサンプルのまま とするなら

fname=parts.options[parts.selectedIndex].value;

を

fname=parts.selectedIndex;

と変えるだけで使えます。
valueに関係なくOptionリストの上から順に、
0,1,2,3,4・・・の番号です。

そのサンプルもう少し整えた方が良いと思いますけど。

お礼

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

valueに関係なくできるのは、汎用性があって
いいですね。

ありがとうございます。

回答No.3

cb400NC-31

取得した値をカンマ区切りで分割し、色識別する値を取得したら
いかがでしょう？

サンプル

<SCRIPT language="JavaScript">
<!--

img0=new Image()
img0.src="images/red.gif"
img1=new Image()
img1.src="images/orange.gif"
img2=new Image()
img2.src="images/green.gif"
img3=new Image()
img3.src="images/blue.gif"
img4=new Image()
img4.src="images/glay.gif"

function imgChange(parts){
fname=parts.options[parts.selectedIndex].value;
var hoge = fname.value.split(',')
if(hoge[1]==1000){document.imgsmp.src=img0.src;}
if(hoge[1]==2000){document.imgsmp.src=img1.src;}
if(hoge[1]==3000){document.imgsmp.src=img2.src;}
if(hoge[1]==4000){document.imgsmp.src=img3.src;}
if(hoge[1]==5000){document.imgsmp.src=img4.src;}
}

// -->
</SCRIPT>

補足

回答ありがとうございます。
なるほど～色識別する値を取得するという
方法があるんですね。
ありがとうございます。

回答No.2

redfox63

イメージのファイル名などはvalueに持たせているのでしょうか？

たとえば『レッド,1000』なら、『,』の前の「レッド」とか
ある一定の法則にしたがっているならプログラミング可能ですよ

たとえばvalueを『イメージファイル名,名称,価格』といった具合にしているなら

function imgChange(oParts)
{
　　// 選択された項目のデータを『,』で分割
　　var ss = oParts.options[oParts.SelectedIndex].value.split(",");
　　if ( ss[0] != "undfined" ) {
　　　　// 拡張子無しなら
　　　　document.imgsmp.src = ss[0]+".jpg";
　　　　// 拡張子付きなら
　　　　// document.imgsmp.src = ss[0];
　　}
}
といった具合で ・・・

お礼

回答ありがとうございます。

フォームもサンプルを見ながら書いたので、
仕組みがわかっていないのですが、

イメージのファイル名などは
valueには反映してませんでした。
カンマで区切ればvalueにいろんな要素を
盛り込めるんですね。

ありがとうございます。

回答No.1

auty

サンプルに合わせての修正を考えて見ます。

・　"グリーン,3000"
　　　は、
　　"green.gif,3000"
　　にするとより簡単に出来ます。

・　fname=parts.options[parts.selectedIndex].value;
は、

---------------------------------------------------------
var fname0=parts.options[parts.selectedIndex].value;
var fname1=fname0.split(/,/);
fname=fname1[0];
tanka=fname1[1];
---------------------------------------------------------

に変更してみます。
　　fnameは、　そのまま同じ
　　tankaには、単価
が入っているはずです。適当に処理してください。
"green.gif,3000"のファイル名は長さは任意ですが、”,”を含んではいけません。

以上です。おかしい所があればお知らせください。

お礼

フォーム自体もあまり解かってなかったので
サンプルに合わせての修正ありがとうございます！