セレクトボタンで特定の項目でアラート表示

このQ&Aのポイント
  • セレクトボタンで特定の項目を選択するとアラートが出る方法を知りたい
  • ラジオボタンやチェックボックスではアラートが出るが、セレクトボタンではうまく動作しない
  • 「スイカ」と「りんご」に同じアラートを出す方法を教えて欲しい
回答を見る
  • ベストアンサー

セレクトボタンで特定の項目でアラート表示

セレクトボタンで特定の項目でアラート表示 はじめまして。 当方javascript初心者です。 ラジオボタンやチェックボックスで特定のボタンを選択すると アラートが出る、いうことをしています。 ですが、セレクトボタンで特定のボタンを選択したらアラート という事ができません。 「スイカ」と「りんご」に同じアラートを出すには どうすればいいのか、いろいろとサイトを巡っているのですがわかりません。 もう1日この問題で詰まってます。 <form> <table cellpadding="5"> <tr> <td> <input type="radio" onclick=alert('コメント')>100円 <input type="radio" 200円 </td> </tr> <tr> <td> <select name="select"> <option>とくに無し</option> <option>スイカ</option> <option>りんご</option> </select> </td> </tr> </table> </form> どなたかいい方法をご存知の方、是非とも教えていただけないでしょうか。 よろしくおねがいします!

  • okja
  • お礼率100% (2/2)

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

<script type="text/javascript"> function func(obj){ if(obj.value=="スイカ"||obj.value=="りんご"){ alert("甘くておいしいよー!!") } } </script> <form> <table> <tr> <td> <input type="radio" name="rd" value="100円" onclick="if(this,checked)alert(this.value);">100円 <input type="radio" name="rd" value="200円" onclick="if(this,checked)alert(this.value);">200円 </td> </tr> <tr> <td> <select name="select" onchange="func(this)"> <option value="なし">なし</option> <option value="スイカ">スイカ</option> <option value="りんご">りんご</option> </select> </td> </tr> </table> </form>

okja
質問者

お礼

>arenani_sorenaniさん すごい!!! こんなシンプルにアラートが出せるとは! これはつまり もし、「セレクトボタン」のvalue「スイカ」と「りんご」を選択したら 「甘くておいしいよー!!」というアラートを出す、 という事ですね。 arenani_sorenaniさん、 勉強になりました! 本当にありがとうございました!!!

その他の回答 (1)

回答No.1

<form> <table> <tr> <td> <input type="radio" name="rd" value="100円" onclick="if(this,checked)alert(this.value);">100円 <input type="radio" name="rd" value="200円" onclick="if(this,checked)alert(this.value);">200円 </td> </tr> <tr> <td> <select name="select" onchange="alert(this.value)"> <option value="なし">なし</option> <option value="スイカ">スイカ</option> <option value="りんご">りんご</option> </select> </td> </tr> </table> </form>

okja
質問者

お礼

>arenani_sorenaniさん 早速のご回答ありがとうございます!! ラジオボタンも1つしか選択できなくなっててすごいです! あとすみません。 りんごとスイカのみアラートを表示したく、 なおかつ同じ内容にしたいです。 <select name="select" onchange="alert(this.value)"> <option>なし</option> <option value="同じ内容">スイカ</option> <option value="同じ内容">りんご</option> </select> これだと「なし」にも空のアラートが表示されます。 やっぱり難しいですね。

関連するQ&A

  • alertが表示されないのです。

    SQLサーバーから検索して情報を取り出す設定でフォームを作りました。 性別のラジオボタンを選択せず、検索ボタンを押すとalertがでるようにしたいのですが出てきません。見ていただけませんか?(一部省略しています) <html> <head> <script language="JavaScript"> <!-- function afSubmit(){ if(optSex[0]=false and optSex[1]=false and optSex[2]=false); { alert("性別を選択してください。"); return false; } } //--> </script> </head> <body> <form name="frmEnq" action="kensaku2.asp" method="post" onSubmit="JavaScript:return afSubmit();"> <center><table border="5" width="400" > <tr bgcolor="#ffcc66"> <td colspan="2"></td> </tr> <tr> <td>■設問1■</td> <td> <select name="lstANQ1"> <option value=0>全件 </td> </tr> <tr> <td>■設問2■</td> <td> <select name="lstANQ2"> <option value=0>全件 </td> </tr> <tr> <td>■性 別■</td> <td> <input type="radio" name="optSex" value=0>全件 <input type="radio" name="optSex" value=1>男性 <input type="radio" name="optSex" value=2>女性 </td> </tr> <tr> <td>■年 齢■</td> <td> <select name="lstAge"> <option value=0>全件 </td> </tr> <tr> <td colspan="2"><center> <input type="submit" value="検索"> <input type="reset" value="キャンセル"> </center></td> </tr> </table></center> </body> </html>

  • ラジオボタン選択で「複数ラジオボタン」をアクティブにするには?

    ■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効) 用途はアンケートフォームです。 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。 </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">カテゴリー1 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー2 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー3 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー4 </td> </tr> </table> </form>

  • ラジオボタンでの表示の切替方法

    2つのラジオボタンの切替によって、表示の切替を行いたいです。 例えば、Aを選択すると(1)の入力フォームが表示され、Bを選択すると(2)が表示したいです。初期表示はAが選択された時と同じ内容となります。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td><form name="Quick1"> <tr><td>選択</td> <td> <input type="radio" name="A" value="1" checked>A  <input type="radio" name="B" value="2">B  </td></tr> <tr> <td>(1)</td> <td> <input type="text" size="6" maxlength="5" name="text1" value="">- <input type="text" size="6" maxlength="5" name="text2" value="">- <input type="text" size="6" maxlength="5" name="text3" value=""> </td></tr> <tr> <td>(2)</td> <td> <input type="text" name="text7" size="43" value=""> </td></tr> </table></form></td></tr></table> すみませんが、よろしくお願い致します。

  • 「戻るボタン」 : ボタンを使わずに、・・・

    HTMLでは、戻るボタンは、 <FORM> <INPUT TYPE="button" VALUE="戻る" onClick="history.back </FORM> ですが、この動作で、 戻るボタンではなく、 <table><tr><td>戻る</td></tr></table> をクリックするようにしたいのですが、・・・ 可能でしょうか。 可能でしたら、htmlをお願いします。

    • ベストアンサー
    • HTML
  • selectでinputの表示を変えたい

    セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト1 <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト2 <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト3 <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト1のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト2のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか? 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。

  • セレクトボックスの内容を次のページで受け取る方法

    <form action="./check.asp" method="POST"> <table> <tr> <td> <select name="year"> <option value="2006" >2006</option> <option value="2007" >2007</option> <option value="2008" >2008</option> </select> </td> </tr> <tr> <td align="center"><input type="submit" value="確認する"></td> </tr> </table> </form> として 次のページで YEAR =Trim(request("year")) Response.Write YEAR で受け取り表示しようとしていますが取れません。なぜですか?教えてください

  • プルダウンによる表示制御方法

    プルダウンの選択内容による表示の切り替えを行いたいです。 例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></td></tr></table> すみませんが、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • セレクトボックスを使ったJavaScriptでの計算方法

    セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。 全部足し算で計算します。 どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。

  • Selectの項目へのアクセス

    Selectを二つ並べ、左で選択されている項目の内容を右のSelectに追加したいのですが、色々わかりません。 ・項目内容を文字列の取得方法は? ・項目の追加方法は? ・項目内容を書き換えるには? 忙しい時期で恐縮なんですが、よろしくお願いいたします。 <title>新しいページ 1</title> <SCRIPT LANGUAGE="JavaScript"> <!--- function list(src,dst){ for(i=0;i<src.length;i++){ if (src.options[i].selected == true) dst.options[0].value = src.options[i].value; } } //---> </SCRIPT> </head> <body> <form method="POST" name="PostForm"> <table border="0" width="100%"> <tr> <td width="7%"> <select size="5" name="MemberList" multiple> <option>A氏</option> <option>B氏</option> <option>C氏</option> <option>D氏</option> <option>E氏</option> <option>F氏</option> </select></td> <td width="70%"> <select size="5" name="AssignedList" multiple> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> </select></td> </tr> </table> <p><input type="button" value="ボタン" name="B3" onclick="list(MemberList,AssignedList)"></p> </form> </body> </html>

  • 文字列を表示/非表示させつつ、ラジオボタンを選択

    つぎのテーブルがあります。 <html><head></head><body> <form id="query" name="query"> <table border="1"> <tr> <td>いちご▲▼</td> <td>みかん▲▼</td> <td>りんご▲▼</td> </tr> </table> <input type="radio" name="select" value="ichigo_up" checked >いちご▲ <input type="radio" name="select" value="ichigo_dw">いちご▼ <input type="radio" name="select" value="mikan_up">みかん▲ <input type="radio" name="select" value="mikan_dw">みかん▼ <input type="radio" name="select" value="ringo_up">りんご▲ <input type="radio" name="select" value="ringo_dw">りんご▼ </form> </body></html> (1) 最初(画面読み込み時)はいちごの脇の「▼」1個だけが表示されている(他の▲は全部隠す) (2) いちごをクリックすると、▼は反転して▲になる (3) もう一回いちごをクリックすると、▲は反転して▼に戻る (4) つぎに、みかんをクリックするといちごの脇の▼は消え、みかんの脇に▼がでる (5) もう一回みかんをクリックすると、▼は反転して▲になる (6) さらに、りんごをクリックするとみかんの脇の▲は消え、りんごの脇に▼がでる (7) 別途、表示される6パターンに応じ、下にあるラジオボタンも適切なものが選択される …というような動作をさせたいのです。 どうぞ、よろしくお願い致します。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1612522 でも同じような質問を してしまい、すみません。もう少し吟味して、上記のようにしたいです。 よろしくお願い致します。

専門家に質問してみよう