ここから質問投稿すると、最大10000ポイント当たる!!!! >>

JavaScript初心者です。

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

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

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

■ドロップダウンメニューで画像が変わる(JavaScript)
http://www.mdn.co.jp/webcre/Tips/Vol12/js_imagec …

このサンプルではフォームの 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>

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

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

このQ&Aに関連する最新のQ&A

A 回答 (4件)

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



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



fname=parts.selectedIndex;

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

そのサンプルもう少し整えた方が良いと思いますけど。
    • good
    • 0
この回答へのお礼

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

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

ありがとうございます。

お礼日時:2008/02/21 16:09

取得した値をカンマ区切りで分割し、色識別する値を取得したら


いかがでしょう?

サンプル

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

この回答への補足

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

補足日時:2008/02/21 16:10
    • good
    • 0

イメージのファイル名などは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];
  }
}
といった具合で ・・・
    • good
    • 0
この回答へのお礼

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

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

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

ありがとうございます。

お礼日時:2008/02/21 16:17

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




・ "グリーン,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"のファイル名は長さは任意ですが、”,”を含んではいけません。

以上です。おかしい所があればお知らせください。
    • good
    • 0
この回答へのお礼

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

お礼日時:2008/02/21 16:19

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング