JavaScript初心者のためのフォームのオプション選択に応じて画像を変える方法
- JavaScript初心者の方がフォームのオプション選択に応じて画像を変える方法について教えてください。
- 質問者はショッピングカートのフォームで、ドロップダウンメニューでオプションを選択するとそれに応じて画像を変えたいと考えています。
- 質問者のフォームのソースコードの一部も共有されており、VALUEにオプション名と追加価格を記入しているため、どのように実装すれば良いのかわからないとのことです。
- ベストアンサー
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> ----------------------------------------------------- 質問も初めてなので、至らない点が多々あるかと思いますが、 よろしくお願いします。
- Factical
- お礼率66% (4/6)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
とりあえず、そのサンプルのまま とするなら fname=parts.options[parts.selectedIndex].value; を fname=parts.selectedIndex; と変えるだけで使えます。 valueに関係なくOptionリストの上から順に、 0,1,2,3,4・・・の番号です。 そのサンプルもう少し整えた方が良いと思いますけど。
その他の回答 (3)
- cb400NC-31
- ベストアンサー率50% (1/2)
取得した値をカンマ区切りで分割し、色識別する値を取得したら いかがでしょう? サンプル <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>
補足
回答ありがとうございます。 なるほど~色識別する値を取得するという 方法があるんですね。 ありがとうございます。
- redfox63
- ベストアンサー率71% (1325/1856)
イメージのファイル名などは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にいろんな要素を 盛り込めるんですね。 ありがとうございます。
- auty
- ベストアンサー率58% (284/486)
サンプルに合わせての修正を考えて見ます。 ・ "グリーン,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"のファイル名は長さは任意ですが、”,”を含んではいけません。 以上です。おかしい所があればお知らせください。
お礼
フォーム自体もあまり解かってなかったので サンプルに合わせての修正ありがとうございます!
関連するQ&A
- 初心者です。一つのformで2つのactionを実現する方法を教えて下
初心者です。一つのformで2つのactionを実現する方法を教えて下さい。 iframeが2つあり、一つのformによる結果をそれぞれに反映させたいのですが。 <iframe src="A.php" name="A" > <iframe src="B.php" name="B" > フォーム↓ <form method="post"> <select name="area"><option selected value="">エリア選択 </option> <option value="01">あいうえお</option> <option value="02">かきくけお</option> <option value="03">さしすせそ</option> </select> <select name="price"> <option selected value="">価格帯選択</option> <option value="01">1000円未満</option> <option value="02">1001円~2000円</option> <option value="03">2001円~3000円</option> <option value="04">3001円以上</option></select> <input type=submit value="絞込" /></form> この結果をA.phpとB.phpに反映させて、それぞれのiframeに表示させたいのですが。 javaを使えばできるそうなのですが、やり方ご存知の方いらっしゃれば教えてくれませんか?よろしくお願いします。
- ベストアンサー
- Java
- 初心者です。一つのformで2つのactionを実現する方法を教えて下
初心者です。一つのformで2つのactionを実現する方法を教えて下さい。 iframeが2つあり、一つのformによる結果をそれぞれに反映させたいのですが。 <iframe src="A.php" name="A" > <iframe src="B.php" name="B" > フォーム↓ <form method="post"> <select name="area"><option selected value="">エリア選択 </option> <option value="01">あいうえお</option> <option value="02">かきくけお</option> <option value="03">さしすせそ</option> </select> <select name="price"> <option selected value="">価格帯選択</option> <option value="01">1000円未満</option> <option value="02">1001円~2000円</option> <option value="03">2001円~3000円</option> <option value="04">3001円以上</option></select> <input type=submit value="絞込" /></form> この結果をA.phpとB.phpに反映させて、それぞれのiframeに表示させたいのですが。 javaを使えばできるそうなのですが、やり方ご存知の方いらっしゃれば教えてくれませんか?よろしくお願いします。
- 締切済み
- JavaScript
- 複数のvalue値を返すには
Aを選択した時10、Bを選択した時100、Cなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、 Aの時10と20を、Bの時100と200、Cの時1000と2000が もうひとつの<input type="text" name="TEXT2" value="">に表示できるようにするにはどうしたらよいのでしょうか。 記述方法を教えていただければ一番いいのですが、サンプルがあるページでもいいので、教えてください。 <script type="text/javascript"> <!-- function kai(){ document.FORM.TEXT.value = document.FORM.num.value; } //--> </script> </head> <body> <form name="FORM"> <input type="text" name="TEXT" value=""> <select name="num" onChange="kai()"> <option value="10">A</option> <option value="100">B</option> <option value="1000">C</option> </select> </form>
- ベストアンサー
- JavaScript
- Javascriptでセレクトメニューの選択チェックの方法
Javascriptでセレクトメニューのフォームをチェックしたいのですが、 リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=\"JavaScript\"> <!-- function Check() { var str = document.form.a.value; if(document.form.a.value == "0") { alert("番号を選択して下さい"); } //--> </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>
- ベストアンサー
- JavaScript
- 1つのformに複数のaction
質問です。 下のようにiframeが2つあり、一つのformによる結果をそれぞれに反映させる検索ページ(kensaku.php)があります。 <script> function sample(F) { F.action = 'ichiran_map.php' F.target = 'ichiran_map' F.submit(); setTimeout(function(){ F.action = 'ichiran.php' F.target = 'ichiran' F.submit(); },1); return false; } </script> <iframe src="A.php" name="A" > <iframe src="B.php" name="B" > <form method="post" onsubmit="return sample(this)"> <select name="area"><option selected value="">エリア選択 </option> <option value="01">あいうえお</option> <option value="02">かきくけお</option> </select> <select name="price"> <option selected value="">価格帯選択</option> <option value="01">1000円未満</option> <option value="02">1001円~2000円</option> <input type=submit value="絞込" /></form> 別のページ(例えばindex.php)に同じようなformを作り、検索結果をこの検索ページに反映させたいと思います。この場合、一つのformに3つのactionを設定したいのですが、どうすれば実現できるでしょうか? 表示画面はkensaku.phpにしたいのですが、そのkensaku.phpにある2つのiframe(A.phpとB.php)にformで指定した値を反映させたいのですが、どうすれば実現できるのでしょうか?どなかた教えて下さい。
- ベストアンサー
- JavaScript
- javascriptについての質問です。複数の一つのselect等で選
javascriptについての質問です。複数の一つのselect等で選択した文字の値をinputに表示したいのですが <FORM> <SELECT NAME="select1"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" a">a</OPTION> <OPTION VALUE=" b">b</OPTION> <OPTION VALUE=" c"c</OPTION> </SELECT> <SELECT NAME="select2"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" 壱">壱</OPTION> <OPTION VALUE=" 弐">弐</OPTION> <OPTION VALUE=" 参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> とこの様なフォームがあるとしまして 各SELECT で選択した各文字を <input TYPE="text" NAME="text1" VALUE="">に追加したいんです。 SELECT一つなら出来たのですが 複数になると追加をどうするのかやり方がわからなくて・・・ 一つのセレクトは一つしか選択できなくなればなお良いのですが・・・ どなたがご教授願えないでしょうか?
- ベストアンサー
- JavaScript
- FORMボタン
このフォーム変なのですか? 見た目は、[年月] [GO] となっていて、 [年月]のセレクトで選んで、 [GO]ボタンを押せばそのページに飛ぶのだと思いますが、 [GO]を押さなくてもセレクトを選んだだけで動作します。 この[GO]のボタンの意味あるんでしょうか? それとも何か間違っていますか? 正しい記述方法があれば教えてください。 <form> <select name="u" onchange="JavaScript:location.href=this.value;return false;"> <option value="http://~~/2009-05-1.html">2009/05</option> <option value="http://~~/2009-04-1.html">2009/04</option> </select> <input type="button" value="GO" onclick="JavaScript: location.href=this.form.u.value; return false;" /> </form>
- ベストアンサー
- HTML
- select値をhiddenのvalueに渡したい
selectで選択されたvalue値を下のhiddenのvalue値(id)に渡して、 hiddenのvalue値(id)がselectで選択されたvalue値になるような フォームを作りたいのですが、作り方をお教え頂ければ幸いです。 <form name="form" method="get" action="index.cgi"> <select name="mode"> <option value="100023">和書</option> <option value="100241">洋書</option> <option value="100524">エレクトロニクス</option> </select> <input type="hidden" name="serch_janru" value="id" /> <input type="text" name="keyword" value="keyword" /><input type="submit" name="submit" value="商品を検索" /> </form> ソース等、具体的にお教え頂けると助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- formのselectを選んだら有効になる
以下のようなフォームで、「選択してください」以外を選択したら 送信ボタンが「有効」になるようにしたいのですが、うまくできません。 どなたか分かる方、教えてください。 よろしくお願いします。 <form> <select name="city"> <option value="" selected>-- 選択してください --</option> <option value="1">千代田区</option> <option value="2">中央区</option> <option value="3">港区</option> <option value="4">新宿区</option> <option value="5">文京区</option> <option value="6">台東区</option> <option value="7">墨田区</option> ・ ・ ・ </select> <input type="submit" value="送信" /> </form>
- 締切済み
- JavaScript
- javascriptでselectboxのvalueを取得し、特定のv
javascriptでselectboxのvalueを取得し、特定のvalue値により、「<input type="text" name~>」をブラウザに表示させたいのですが、やり方がわかりません。 javascriptについて素人です。 jQUERYを使用して、phpのようにif文を追加したらいけるのかなと思って下記のようにやってみたのですが、更新しないと変わりませんでした。。 どなたかお力を貸して下さい!どうか宜しくお願い致します! ========================================== <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="robots" content="noindex,nofollow" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/admin/js/jquery-1.2.3.js" ></script> <script type="text/javascript"> $(function() { hogehoge = $("#abcdefg").val(); if(hogehoge !== '3'){ $('#hijklmn').hide(); } }); </script> </head> <body> <form method="post" action="/admin/~"> <select id="abcdefg"> <option value="1">aaaaaaaa</option> <option value="2">bbbbbbbb</option> <option value="3">cccccccc</option> </select> <div id="hijklmn"> 上のセレクトボックスが3の場合のみ、下記のフォームを表示させたい <input type="text" value="ああああああああ" /> </div> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
早速の回答ありがとうございます。 valueに関係なくできるのは、汎用性があって いいですね。 ありがとうございます。