• ベストアンサー

オプションメニューにアイテムをプログラムで追加したい

form2に置いたメニュー(name=URLs)に、表示したいURLを次々に追加して、その一つのアイテムをクリックしたらform1に表示される、っていう操作をJavaScriptで書きたいのですが、基本的な知識をどなたかお教え下さい。  必要な部品は、一行テキスト領域、メニューURLsにURLの文字列を送り込むためのプッシュボタン、オプションメニュー(URLs)でやりたいと思います。

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

  • ベストアンサー
noname#199778
noname#199778
回答No.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で挙げられているサイトなどは、比較的わかりやすく解説していると思いますよ。 参考になれば幸いです。 見当違いや間違いがありましたら、ごめんなさい。 横から失礼しました。

tonka729
質問者

お礼

lead1976様、見事に一発でできました。初心者には衝撃的です。信じられません。ありがとうございました。  こうなると、欲が出てきます。つまり、私にできるのかどうか、遠い道のりがあるような話なんですが、セレクトメニューを、ユーザが自分のために保存して、自動的に呼び出して、メニューを選択できるようにできるものなのでしょうか?クッキーとかを使えばできるのですか?当てずっぽうですみません。。。 この件はこれで終わりにいたします。ありがとうございました。

その他の回答 (2)

  • the845t
  • ベストアンサー率33% (246/743)
回答No.2

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> で良いかと。

参考URL:
http://tohoho.wakusei.ne.jp/js/window.htm#objWindow
  • the845t
  • ベストアンサー率33% (246/743)
回答No.1

送る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> とかね。

tonka729
質問者

お礼

the845t 様。大変申し訳ございません。大間違いを犯しました。form1,form2はframe1,fram2 の間違いです。ああ、たいへん、すみません。

関連するQ&A

  • オプションメニューのアイテムを保存する方法は

    Perl初心者なので、教えて下さい。 オプションメニュー(name=URLs)にアイテムとして複数のURLを書き入れましたが、これをクライアントが保存し、いつでも自動的に呼び出されるようにしたいのですが、次のことが分かりませんのでお教え下さい。 (1)メニューアイテムをどのようなデータとして変数化するのか? (2)クッキーデータのかたちと保存法は? (3)同上     の自動呼び出しの方法とデータ処理方法は?

    • ベストアンサー
    • Perl
  • 書いたクッキーを読み出してメニューに入れるイベントの書き方

    フォーム部品type=text の一行テキスト領域で入力した単語を、inputwordkensaku.cgiには辞書検索させ検索結果をCookieに書かせるところまでやらせ、そのCookie データをJavaScript で読み、あらかじめ設置しておいたフォーム部品であるメニューにセットしようとしているのですが、うまくいきません。  cgiはエラーが出ずに動きますが、Cookie への書き込みができたか確認しようにも <INPUT size="20" name="inputbox" type="text" onChange = "inputwordkensaku.cgi">のイベントにづけて、このCookie を読み出すための次のようなJavaScriptのプログラムをどこに書きつなげたらよいのかが分かりません。よろしくお願いいたします。 <script type="text/javascript"><!-- function set__resultsData(){ //クッキーに格納されたデータを読み出して、 //オプションメニューと隠しフィールドにセットする getc=document.cookie+";";  //クッキーを読む x1=getc.indexOf("resultdata"); if (x1!=-1) { tem1=getc.substring(x1-1); x2=tem1.indexOf("="); x3=tem1.indexOf(";"); urls_data0=tem1.substring(x2+1,x3); urls_data=unescape(urls_data0); CkOpt=urls_data.split("<>"); //クッキーデータの分析 for (i=1; i<CkOpt.length; i++){ longlinestr = CkOpt[i-1];//これは見出し語の原型 pp = longlinestr.indexOf(" /// "); midashigo = longlinestr.substr(0, pp-1); yakugo = longlinestr.substring(pp+5); document.form1.hiddenlist.options[i] = new Option(); document.form1.hiddenlist.options[i].text = yakugo; //↑隠しリストに辞書の訳語部分のみをセットする document.form1.wordlist.options[i]= new Option(); document.form1.wordlist.options[i].text=midashigo; //見出し語のみをセットする }}} // --></script>

  • オプションメニューの選択されたアイテム内の空白が取得できません

    オプションメニューで選択したアイテムのなかに、 in loco のように空白を含む文字列がある場合、これを送信しても in しか取得されませんでした。空白を含めて取得するにはどうしたらよいのでしょうか? <FORM method="POST" action="EditDic.cgi" name="kdicFORM" target="frame3"> <INPUT type="submit" name="job" value="下から選べ!"> <SELECT size="10" name="wordlist">       for ($i=0; $i<=$#wordlist; $i++) {        <option value=@wordlist[$i]>@wordlist[$i]</option> } </SELECT> </FORM>

    • ベストアンサー
    • Perl
  • セレクトメニューをクッキーに書き込むには?

    セレクトメニュー(URLs)にURLをつぎつぎに放り込んで、つぎにこのデータをクッキーに保存したいと想い、次のように書いてみました。この一文かどうかはわかりませんが、コンマがありません、というエラーが出ます。 data_for_cookie=document.form1.URLs.options.value; ホントに初歩的な知識が欠けていてこんなJavaScriptでさえわかりません。どうか御教示をお願いいたします。

  • オプションメニューのアイテムを一括して再表示したい

    <select name="wordlist"> <option selected>訳語検索の結果</option> for ($i=1; $i<$#midashi; $i++) {print "<option value=\"$midashi[$i]\">$midashi[$i]"; } でいったん表示したメニューを、CGIプログラムが次のプロセスに進んで表示データを更新するとします。でもこのメニューのアイテムだけは全部ひとつの変数に保存しておき、画面再表示の時にこの変数を呼び出して簡単に表示しようと考えています。  が、変数への保存、再表示ができるのかが私のperl知識では分かりません。どなたかお教えいただけると助かります。

    • ベストアンサー
    • Perl
  • セレクトメニューで

    セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>  メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>  メニュー</OPTION> </select> </form></TD>

  • オプションメニュー・クリックした時の処理

    "wordlist"という名前のオプションメニューを作りました。クリックしてdo/selection.cgiを呼び出して送信を受けたデータ(クリックしたアイテムの番号)を読んで処理を行わせようと考えています。 <form name="resultform" action="do_selection.cgi"> --- --- <select name="wordlist" type=submit> <option selected>訳語検索の結果</option> for ($i=1; $i<$#midashi; $i++) {print "<option value=\"$midashi[$i]\">$midashi[$i]"; } </select> </form> ところが、これではdo_selection.cgiが呼び出されませんでした。またsubmit はメニューでクリックしたアイテムの番号をどのようにして送り出すのかも分かりません。tohohoさんのページを見ておりますが、見つかりませんでした。どなたかアドバイスをいただきたいのですが。。。(もし私の質問に不明の箇所がありましたら、補足をいたしますのでご指摘下さい]

    • ベストアンサー
    • Perl
  • セレクトメニューで選択不可にする方法ありますか?

    テキストエリアの入力不可は、Javascriptできますが、 セレクトメニューを選択不可にできません。 初期状態でなく、ある条件が他で選択された時、 選択不可にしたいのですが、何か方法ございますか? <form name=test> <SELECT NAME="nengou"> <option value="1">昭和</option> <option value="2">大正</option> <option value="3">明治</option> </SELECT> </form>

  • リスト内のアイテムをプログラムで選択・ハイライトするには?

    とほほさんのJavaScript マニュアルサイトにつぎのような説明があります。 ■ フォーム部品(セレクト部品) ◆ window.document.form.select.selectedIndex (e3/N2) 現在選択されているオプションオブジェクトを示すインデックス番号(0~)を示します。これに値を代入することにより、セレクションボックスの選択項目を変更することができます。 わたしはそこで、 <?myFORM.listbox.selectedIndex=$j; ?> として、表示されているアイテムの中から、変数$j の番号に一致するアイテムを選択・ハイライトさせたいのです。どういうPHPスクリプトを書けばよろしいのでしょうか?

    • ベストアンサー
    • PHP
  • [JavaScript+<select>]最初から5文字一致でセレクト状態にしたい。

    こんばんは。 HTMLとJavaScriptで簡単な動的ページを作成しています。 そこで、行き詰っていることがありますのでご相談を・・・。 こういう<SELECT>があるとします・・・。 <FORM name="myform"> <SELECT name="menu"> <OPTION value="item1001">メニュー1</OPTION> <OPTION value="item2001">メニュー2</OPTION> </SELECT> </FORM> 初期値を「メニュー2」にしたい場合・・・これをJavaScriptで指定する場合、ONLOADのタイミングで・・・ document.myform.menu.value = "item2001"; とすればいけます。 今回は・・・"item2"だけの情報でヒットさせたいと思っています。 つまり、optionのvalue値の頭から5桁だけのマッチングでセレクト状態にさせたいのです。 ループという形をとらずにセレクトさせる方法を探しています。 テクニックをご教授下さい・・・。 宜しくお願い致します。