- ベストアンサー
オプションメニューにアイテムをプログラムで追加したい
form2に置いたメニュー(name=URLs)に、表示したいURLを次々に追加して、その一つのアイテムをクリックしたらform1に表示される、っていう操作をJavaScriptで書きたいのですが、基本的な知識をどなたかお教え下さい。 必要な部品は、一行テキスト領域、メニューURLsにURLの文字列を送り込むためのプッシュボタン、オプションメニュー（URLs)でやりたいと思います。
- tonka729
- お礼率63% (107/168)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
横から失礼します。 質問文で目指していることが少々つかみきれなかったのですが、#1の方へのお礼を見て少し把握できた感じがします。 まとめると、フレームが二つ切ってあって、そのうちの一つのフレーム内にテキスト入力部と、ボタンと、セレクトメニューを用意するとして、 ・テキスト入力部からURLを入力してそれをボタンクリックすることでセレクトメニューの中にそのURLを追加する ・セレクトメニューを選択すると、もう一方のフレーム内に選択したURLが入力されるようにする という動作をしたいということと読みましたが、これでよろしいでしょうか? 具体的なソースを挙げてしまいますね。 下記のソースをframe2の内容に組み込めば、おそらくご希望の動作になるのではないかと思います。 <html> <head> <title></title> <script type="text/javascript"><!-- function putOpt(){ n=document.form1.URLs.length; document.form1.URLs.options[n]= new Option(); document.form1.URLs.options[n].text=document.form1.url_in.value; document.form1.url_in.value="http://"; document.form1.url_in.focus(); } function f1move(){ parent.frame1.location.href=document.form1.URLs[document.form1.URLs.selectedIndex].text; } // --></script> </head> <body> <form name="form1" onSubmit="putOpt(); return false;"> <input type="text" name="url_in" size="40" value="http://"> <input type="submit" value="追加"> <br> <select name="URLs" onChange="f1move();"> <option>選択してください</option> </select> </form> </body> </html> とりあえず、このようなソースにすれば、テキスト入力欄で入力したURLをセレクトメニューに送ることができ、またセレクトメニューから選択したURLをframe1に表示させることができると思います。 スクリプトの内容などについては、JavaScriptのリファレンス本や、解説をしているサイトなどを参照して、調べてみてください。 #1の方が#2で挙げられているサイトなどは、比較的わかりやすく解説していると思いますよ。 参考になれば幸いです。 見当違いや間違いがありましたら、ごめんなさい。 横から失礼しました。
その他の回答 (2)
- the845t
- ベストアンサー率33% (246/743)
frameとした場合の解が欲しいってこと？ なら、 <script language="JavaScript" type="text/javascript"> <!-- function SelectUrl(){ window.parent.frame1.location.href = document.form1.URLs.value; } // --> </script> <form name="form1" onChange="SelectUrl()"> <select name="URLs"> <option value="">選択してください</option> <option value="http://hoge.jp">hoge.jp</option> <option value="http://foo.jp">foo.jp</option> <option value="http://bar.jp">bar.jp</option> </select> </form> で良いかと。
- the845t
- ベストアンサー率33% (246/743)
送るbuttonはなくても、<select>のonChangeで行けるかと。 例えば、 <script language="JavaScript" type="text/javascript"> <!-- function SelectUrl(){ document.form1.url.value = document.form2.URLs.value; } // --> </script> <form name="form1"> <input type="text" name="url" value=""> </form> <br> <form name="form2" onChange="SelectUrl()"> <select name="URLs"> <option value="">選択してください</option> <option value="http://hoge.jp">hoge.jp</option> <option value="http://foo.jp">foo.jp</option> <option value="http://bar.jp">bar.jp</option> </select> </form> とかね。
お礼
the845t 様。大変申し訳ございません。大間違いを犯しました。form1,form2はframe1,fram2 の間違いです。ああ、たいへん、すみません。
お礼
lead1976様、見事に一発でできました。初心者には衝撃的です。信じられません。ありがとうございました。 こうなると、欲が出てきます。つまり、私にできるのかどうか、遠い道のりがあるような話なんですが、セレクトメニューを、ユーザが自分のために保存して、自動的に呼び出して、メニューを選択できるようにできるものなのでしょうか?クッキーとかを使えばできるのですか?当てずっぽうですみません。。。 この件はこれで終わりにいたします。ありがとうございました。