NNで動く書き方を教えてください

このQ&Aのポイント
  • CGIに検索のキーワードを渡すために、セレクトメニューを2つ使って、キーワードを選ぶ仕組みを、表示・非表示の定義をjavascriptで行いました。
  • NNでも上のセレクトメニューを選択すると、下のセレクトメニューの内容が変わる動きを実現できるよい書き方を教えてください。
回答を見る
  • ベストアンサー

NNで動く書き方を教えてください

CGIに検索のキーワードを渡すために、セレクトメニューを2つ使って、キーワードを選ぶ仕組みを、表示・非表示の定義をjavascriptで下記のように書きました。 function menu(form) { if (form.mif[0].selected){ m1.style.display=''; m2.style.display='none'; m3.style.display='none'; } if (form.mif[1].selected){ m1.style.display='none'; m2.style.display=''; m3.style.display='none'; reSel(document.mm2.keyword.options); } if (form.mif[2].selected){ m1.style.display='none'; m2.style.display='none'; m3.style.display=''; reSel(document.mm3.keyword.options); } } ところが、NNではエラーになってしまいます。 NNでも上のセレクトメニューを選択すると、下のセレクトメニューの内容が変わる動きを実現できるよい書き方を教えてください。

  • cheb
  • お礼率74% (20/27)

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

  • ベストアンサー
  • mju78ik
  • ベストアンサー率64% (11/17)
回答No.1

ネスケとIEではスタイルシートへの対応度が違うので、素直に書いたほうがよいのでは? <script type="text/javascript"> <!-- function listchg(f) { var idx = f.list1.selectedIndex; var items = f.list2.options; items.length=0; if (idx==0) { items[items.length] = new Option("type1-item1"); items[items.length] = new Option("type1-item2"); items[items.length] = new Option("type1-item3"); } else { items[items.length] = new Option("type2-item1"); items[items.length] = new Option("type2-item2"); } items.selectedIndex=0; } //--> </script>

cheb
質問者

お礼

ありがとうございました。お礼が大変遅くなって申し訳ありませんでした。言い訳ですが、別件に追われていたので...。実は、まだ書いて試していないのですが、やってみます。

関連するQ&A

  • NN4で、ある日時になったら画像を消したい

    先日、ある日時になったら画像を消す方法を教えて頂いたのですが、NN4でも動くように修正したいのですがどうすればいいかわかりません。 その時教えて頂いたソースは下記です。 function start(){ var limitTime="2006/04/10 11:50:30";//ある日時を設定して下さい。 var limitDate=new Date(limitTime); var nowDate=new Date(); defTime=limitDate-nowDate; if(defTime>0){ document.getElementById("img1").style.display="block"; document.getElementById("img2").style.display="block"; setTimeout("task()",defTime); }else{ document.getElementById("img1").style.display="none"; document.getElementById("img2").style.display="none"; } } function task(){ document.getElementById("img1").style.display="none"; document.getElementById("img2").style.display="none"; } どうすれば動くようになるのか教えて頂けないでしょうか。 よろしくお願いします。

  • ページが切り替わるスクリプトで最初から指定のページを表示させる

    <html> <head> <script type="text/javascript" language="JavaScript"> <!-- JavaScript小技集 2005. 6.17 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 selected="selected">記事を選ぶ</option> <option value="item1">記事1</option> <option value="item2">記事2</option> <option value="item3">記事3</option> </select> </form> </body> <html> これなんですが、これを貼ってあるページを読み込んだ際、最初からitem1を表示した状態にしたいのですが どうすればよいのでしょう?

  • JavaScriptで項目入力の制限分岐の仕方

    WEBアンケートフォームを作る際、JavaScriptで項目入力の制限分岐の仕方を教えてください WEBアンケートフォームを作ろうとしているのですが、条件がいくつかありうまく作れません。 どなたかこの様な条件分岐でうまくいく方法をご存知の方、あるいは例がのっているWEBチュートリアルのページをご存知の方いらっしゃいませんか? 【以下、作りたいフォームの項目】 選択肢A~E(ラジオボタンによる選択)とプルダウンメニュー、テキストボックス入力フィールドがある。 --------------- A プルダウンメニュー B C D E テキストボックス --------------- テキストボックスはグレーアウトでデフォルトは入力不可になっている。 プルダウンメニューもデフォルトでは選択ができないようになっている。 Aを選んだらプルダウンメニューが選択可。 C、D、Eを選んだら、テキストボックスが入力可能になる。 ■■■ いろいろOK Wave内を調べたり、ググって調べて以下のようなソースを書いてみたのですが、 FireFoxやGoogleCromeだとうまく動きません。 これを動かせるようにしていただいても、助かります。 <input type="radio" name="radio1" value="AAA" id="r1" checked onclick="this.form.select1.style.display='inline';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r1">AAA</label><select name="select1" style="display='inline'"><option value="" selected> ------------- </option><option value="111">111</option><option value="222">222</option><option value="333">333</option><option value="444">444</option><option value="555">555</option><option value="666">666</option><option value="777">777</option><option value="888">888</option><option value="999">999</option></select><br /><input type="radio" name="radio1" value="BBB" id="r2" onclick="this.form.select2.style.display='inline';this.form.select1.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r2">BBB</label><input name="select2" style="display='none'"><br /><input type="radio" name="radio1" value="CCC" id="r3" onclick="this.form.select3.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r3">CCC</label><input name="select3" style="display='none'"><br /><input type="radio" name="radio1" value="DDD" id="r4" onclick="this.form.select4.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select5.style.display='none'"><label for="r4">DDD</label><input name="select4" style="display='none'"><br /><input type="radio" name="radio1" value="EEE" id="r5" onclick="this.form.select5.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none'"><label for="r5">EEE</label><input name="select5" style="display='none'"> ■■■ よろしくお願いします。

  • NN7.0でレイヤーの表示・非表示

    レイヤーの表示・非表示のスクリプトなんですが、 function OpenLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="visible"; } //IEの場合 else { content_menu.style.visibility="visible"; } } function CloseLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="hidden"; } //IEの場合 else { content_menu.style.visibility="hidden"; } } に書きました。 IE6.0では動作しますがNN7.0では何も起こりません。 どなたかどのように表記をすればいいのか教えてください。よろしくお願いします。

  • window.onloadを複数実行したいのです

    こんにちは。 最近、サーバーを借りてホームページを作りはじめた初心者なのですが、どなかた教えて下さいm(_ _)m ↓formでselectを使ったプルダウンメニューを設置しました。 <select id="area" name="area" onchange="changeA();"> <option value="1">海</ottion> <option value="2">山</option> </select> このプルダウンメニューを触ると、Javascriptの制御で、海の項目が選択されると海関連の情報が表示され、山の項目が選択されると山関連の情報が表示されるページを作りました。 ↓Javascriptソース function changeA(){ if(document.getElementById('area')){ id = document.getElementById('area').value; if(id == '1'){ document.getElementById('sea1').style.display = ""; document.getElementById('sea2').style.display = ""; document.getElementById('mnt1').style.display = "none"; document.getElementById('mnt2').style.display = "none"; }else if(id == '2'){ document.getElementById('sea1').style.display = "none"; document.getElementById('sea2').style.display = "none"; document.getElementById('mnt1').style.display = ""; document.getElementById('mnt2').style.display = ""; } } } window.onload = changeA; という感じです。 このような制御のプルダウンメニューを同じページにもうひとつ配置したところ、ページをブラウザの更新ボタンで更新したりすると、関係ない項目などが表示されるようになってしまいました。 原因を調べるために検索をしてみたところ、window.onloadを2つ実行させるには特別なことが必要とのことでしたが、どうすればよいのかが全然わかりません。 どなたか教えてくれないでしょうか? お願いします。

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

  • style.displayだと効率悪いから…

    style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById(&#039;Box1&#039;).style.display = "";と、 document.getElementById(&#039;Box1&#039;).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(&#039;sample&#039;)){ id = document.getElementById(&#039;sample&#039;).value; if(id == &#039;select1&#039;){ document.getElementById(&#039;Box1&#039;).style.display = ""; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = "none"; }else if(id == &#039;select2&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = ""; document.getElementById(&#039;Box3&#039;).style.display = "none"; } else if(id == &#039;select3&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。

  • Javascriptで質問です2

    セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを2段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <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>

  • プルダウンをもう一つ増やしたい&フレームページで使用のため、別ウインドウで表示させたい

    ↓他サイトさんにてサンプルで置いてあったものを拝借して自分なりにやってみました。 1、これをさらにもうひとつプルダウンを選択させて他サイトへジャンプさせる場合はどのようにしたらよいですか。 2、フレームページで使うので、他サイトの表示を別ウインドウで表示させたいのですが、どのようにしたらよいですか。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http:///www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <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 = "inline"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">選んでください</option> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select> <select id="item1" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item2" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item3" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </form> </body> </html>

  • ブラウザ判別

    テーブル行をスイッチによって表示非表示を切り替える機能を実装してるんですが IEではtable-rowを入れてもエラーを出し NNやFirefoxではblockを入れるとレイアウトが崩れてしまい IEの場合block、NNやFirefoxではtable-rowを判別していれるようにしたんですが 切り替えているとなぜかたまにblockが入ってしまうことがあります //ブラウザ判別 if (document.all) { var display = 'block'; } else if (document.getElementById) { var display = 'table-row' } if(switch_1 == "on"){ document.getElementById('row1').style.display = display; document.getElementById('row2').style.display = 'none'; document.getElementById('row3').style.display = display; } if(switch_1 == "off"){ document.getElementById('row1').style.display = 'none'; document.getElementById('row2').style.display = display; document.getElementById('row3').style.display = 'none'; } 何かおかしいのでしょうか もしくは代替方法があればご教示お願いします

専門家に質問してみよう