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>
-----------------------------------------------------
質問も初めてなので、至らない点が多々あるかと思いますが、
よろしくお願いします。
No.1
- 回答日時:
サンプルに合わせての修正を考えて見ます。
・ "グリーン,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"のファイル名は長さは任意ですが、”,”を含んではいけません。
以上です。おかしい所があればお知らせください。
No.2
- 回答日時:
イメージのファイル名などは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.3
- 回答日時:
取得した値をカンマ区切りで分割し、色識別する値を取得したら
いかがでしょう?
サンプル
<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.4ベストアンサー
- 回答日時:
とりあえず、そのサンプルのまま とするなら
fname=parts.options[parts.selectedIndex].value;
を
fname=parts.selectedIndex;
と変えるだけで使えます。
valueに関係なくOptionリストの上から順に、
0,1,2,3,4・・・の番号です。
そのサンプルもう少し整えた方が良いと思いますけど。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
innerHTML内では改行は禁止?
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
JSのボタンを複数う使うには
-
formのfileの値をhiddenでも持...
-
コードを毎回書き変えずにIEブ...
-
BackSpaceしたい(QNo.2734284の...
-
テキストエリアの行頭行末に指...
-
VB.NETで<Input>タグ、<text...
-
横に書いてある文を縦に表示。
-
onclickが動作しない
-
JSPファイルにJavaScriptを埋め...
-
javaScriptの変数をJavaの変数...
-
特定<table>内の<td>の色を変える
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
value内に変数を入れたい
-
ラジオボタンのチェックが外れ...
-
ラジオボタンにタブインデック...
-
チェックボックス付きのテーブ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
javaScriptの変数をJavaの変数...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
formのfileの値をhiddenでも持...
-
innerHTML内では改行は禁止?
-
追加ボタンを押した際に ok ボ...
-
ボタンかリンクをクリックする...
-
JQueryでfunctionに引数としてI...
-
JavaScriptのfileオブジェクト...
-
JSのボタンを複数う使うには
-
クリックでテーブル内の背景色...
-
VB.NETで<Input>タグ、<text...
-
ブラウザの外にあるマウスの情...
-
jQueryでshow/hideが上手く行か...
-
onClickがinput type="image"だ...
-
【javascript】ボタンクリック...
-
開いた子ウィンドウにあるボタ...
-
javascriptで作成されたテーブ...
-
jQueryで設定したイベントハン...
おすすめ情報