- ベストアンサー
FireFoxでは問題なくIEでは動作しない
Wernerの回答
- Werner
- ベストアンサー率53% (395/735)
どうやらIEだとoption要素でonclickイベントは使えないようです。 （例えばonclickにalertなどを入れても何も反応がないです。） 仕方ないのでselect要素の方のonclickイベントを使って 関数の中で選択されているオプションを調べて場合分けしてみてはどうでしょう。
関連するQ&A
- style.displayだと効率悪いから…
style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。
- ベストアンサー
- JavaScript
- style.displayだと効率悪いから...
style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
- Javascriptで質問です２
セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを２段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
- 「ポタン」で表示・非表示 (つづき)(^^;
「ポタン」で表示・非表示 ブロック<Div></Div>の「表示・非表示」を「ポタン」でやりたいのですが。。の件で、下記の回答をいただき、できたのですが、 最初に「★非表示」の状態にしたい場合は、どうしたらいいのでしょうか? よろしく願いいたします。 <html> <body> <div id="a">abcdefg</div> <input type="button" value="on/off" onClick="disp('a')"> <hr> <div id="b">abcdefg</div> <input type="button" value="on/off" onClick="disp('b')"> <hr> <script> function disp(id){ // alert(document.getElementById(id).style.display=='none'?'block':'none'); document.getElementById(id).style.display = document.getElementById(id).style.display=='none'?'block':'none'; } </script>
- ベストアンサー
- JavaScript
- firefoxだけ、javascriptが思うように動作しません。
firefoxだけ、javascriptが思うように動作しません。 下記、html記述です。 <a href="javascript:void(0);" onclick="show1()">tab1</a> <a href="javascript:void(0);" onclick="show2()">tab2</a> <a href="javascript:void(0);" onclick="show3()">tab3</a> <div id="page1">page1</div> <div id="page2">page2</div> <div id="page3">page3</div> 下記、javascript記述です。 function show1(){ page1.style.display="block"; page2.style.display="none"; page3.style.display="none"; } function show2(){ page1.style.display="none"; page2.style.display="block"; page3.style.display="none"; } function show3(){ page1.style.display="none"; page2.style.display="none"; page3.style.display="block"; } tab1をクリックすると、page1のみ表示 tab2をクリックすると、page2のみ… という風に動作させたいです。 IE、opera、chromeでは動作しますが、 firefoxだけ全く動作しません。 どのように修正すれば動くようになるでしょうか？ javascriptについては初心者なので、 基本的なところから間違っているのかもしれませんが、 ご回答よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptがIEで機能しない
ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択１"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままです どこを修正してやればいいでしょうか？ ぜひ御指南ください。
- ベストアンサー
- JavaScript
- javascriptがIEだけ動作しません
javascript初心者です。 サイトに、ラジオボタンの選択に応じて、 値をテキストボックスに返す仕組みを作りたいと思っています。 Chrome,FireFox,Operaでは正しく動作していすが、 IEでは、テキストボックスのみ表示され、 ラジオボタンと選択肢が非表示になってしまいます。 お手数ですが、ご教示をお願いしたく、 よろしくお願いします。 <form> <script type="text/javascript"> NoDHTML=(!document.all && !document.getElementById) || (navigator.userAgent.indexOf('Opera/6.')>=0) || (navigator.userAgent.indexOf('Opera 6.')>=0); function changeMenu2(n) { if (NoDHTML) return; if (n==100) { if (document.all) { document.all['TNAME'].style.display='none'; document.all['TNAME2'].style.display='none'; } else if (document.getElementById) { document.getElementById('TNAME').style.display='none'; document.getElementById('TNAME2').style.display='none'; } with(document.forms[0].TNAME) { options.length=1; options[0].text=''; options[0].value=''; } document.forms[0].TNAME2.value=''; } else { if (document.all) { document.all['TNAME2'].style.display='none'; document.all['TNAME'].style.display='none'; } else if (document.getElementById) { document.getElementById('TNAME2').style.display='none'; document.getElementById('TNAME').style.display='none'; } if (n==0) { document.forms[0].course_name.value='りんご'; document.forms[0].course_price.value='600円'; } else if (n==1) { document.forms[0].course_name.value='メロン'; document.forms[0].course_price.value='1000円'; } else if (n==2) { document.forms[0].course_name.value='マンゴー'; document.forms[0].course_price.value='5000円'; } } document.forms[0].TNAME.options[0].selected=true; } if (!NoDHTML) { document.write( ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(0);" onkeypress="return(true)" />リンゴ</label><br />'+ ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(1)" onkeypress="return(true)" />メロン</label><br />'+ ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(2);" onkeypress="return(true)" />マンゴー</label>'+ '<input type="hidden" name="course_name">' ); } </script> <!-- ★★ここの部分はCSSで強制的に見えないようになっています --> <select name="TNAME" id="TNAME" style="display:none !important;"> <option value="" selected="selected" style="display:none !important;"></option> </select> <!-- /★★ここの部分はCSSで強制的に見えないようになっています --> <script type="text/javascript"> if (!NoDHTML) { document.write( '<input type="hidden" name="TNAME2" id="TNAME2" value="" size="20" />' ); } </script> <br /> <br /> <br /> <!-- ★★ここに"course_priceの値が表示されます --> <input type="text" name="course_price" readonly="readonly"> <!-- /★★ここに"course_priceの値が表示されます --> </form>
- ベストアンサー
- JavaScript
- プルダウンメニューでページ内の表示を変える の派生質問
某サイトで紹介いただいているソースの引用で恐縮ですが、 下記のソースで、div1～3のソース部分はうまく切り替わるのですが、ページが開いてすぐの時点では、まったく表示されず、セレクト項目を選んだ後に切り替えが動作します。 ページを開いたら、デフォルトで <div id="item1"> <p> あいうえお </p> </div> が表示されるようにするには、どうすれば宜しいでしょうか？ ご教授くださいませ ------------------------ <html> <head> <script type="text/javascript" language="JavaScript"> function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option value="item1">ディブ１</option> <option value="item2">ディブ２</option> <option value="item3">ディブ３</option> </select> </form> <div id="item1"> <p> あいうえお </p> </div> <div id="item2"> <p> かきくけこ </p> </div> <div id="item3"> <p> さしすせそ </p> </div> </body> </html>
- 締切済み
- JavaScript
- document.getElementByIdがIE8だけ動きません
javascript 初心者です。 HP上で問い合わせページを作っています。 質問の内容によって入力項目を表示/非表示させるために以下のようなスクリプトを書きました。 q-1 を選んだ時は”名前”と”質問内容”を入力，q-2 を選んだ時は”名前”，”入力１”，”質問内容”を入力するという形式です。 質問内容の選択はプルダウンメニューから行います。 IE8以外では動くのですが、IE8だけ動きません。 どうすればよいかを教えて下さい。 <head> 略 <script type="text/javascript"><!-- function checkmenu( disp ) { var a = disp ; document.getElementById('basic-info').style.display = "block"; document.getElementById('question').style.display = "block"; switch(a){ case "select_q-1" : document.getElementById('disp_q-2').style.display = "none"; break; case "select_q-2" : document.getElementById('disp_q-2').style.display = "block"; break; } } --> </script> </head> <body> <略> <select name="naiyou"> <option onclick="checkmenu('select_q-1')" value ="q-1">質問１<br> <option onclick="checkradio('select_q-2')" value ="q-2">質問２<br> <div id="basic-info" style="display:none"> <table class="aaa"> <tr> <td class="aaa" width="30%" valign="top"><b>お名前:</b></td> <td class="bbb" width="70%"><input type="text" name="name" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="disp_q-2" style="display:none"> <table class="aaa" > <tr> <td class="bbb" width="30%" valign="top"><b>入力１：</b></td> <td class="td_toumei" width="70%"><input type="text" name="nyuuryoku1" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="question" style="display:none"> <table class="aaa"> <tr> <td class="aaa" colspan="2"><b>質問内容: </b></td> </tr> <tr> <td class="bbb" valign="top" colspan="2"> <textarea name="question" cols="60"rows="10"></textarea> </td> </tr> <tr> <td class="bbb" colspan="2"> <input type="hidden" name="language" value="j"> <input type="submit" value="送信"> <input type="button" name="del" value="本文 クリア" onclick="msgclear()"> </td> </tr> </table> </div> 略 </body> 実際の質問の項目や入力内容はもう少し複雑ですが、おおまかにはこんな感じです。 プルダウンメニューで選択しても、IE8だけまったく動きません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとう御座いました。 SELECT側に入れたところ正常に動作しましたが、value="none"などとした結果、POSTで送信後もその選択肢の値が「none」になってしまいますよね・・・？ これを別に指定することは可能でしょうか？