• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:FORMのSELECTのOPTION項目をサブウインドウから追加できない)

FORMのSELECTのOPTION項目をサブウインドウから追加できない

noname#227796の回答

  • ベストアンサー
noname#227796
noname#227796
回答No.1

確か、セキュリティの問題だったか何かで、外部から直接オブジェクトを変更するような操作はできなかったのではないかと思います。 ですので、対応方法としては、error.htmに自分のOptionオブジェクトに新たに値を追加する関数を作り、_sub.htmはその関数を呼ぶようにすれば対応できると思います。 そういう方法ではだめでしょうか? 以下、こんな感じで行けると思う例です。 ----error.htm---- <HTML><HEAD></HEAD> <SCRIPT> function addOption(text,value){ sel = this.document.testForm.sel1; sel.options[sel.options.length] = new Option(text,value); } </SCRIPT> <BODY onLoad="window.open('_sub.htm')"> <form name="testForm"> <select name="sel1"> <option selected>A</option> <option>B</option> <option>C</option> </select> 'D' should be added by JavaScript in the '_sub.htm'.<br> However, the error ocurred and it was not performed! </form> </BODY></HTML> ----_sub.htm---- <HTML> <HEAD></HEAD> <SCRIPT> function AddOption(){ opener.addOption("D","V"); } </SCRIPT> <BODY onLoad="AddOption()"> Test Sub Window </BODY></HTML>

isobeman
質問者

お礼

と思ったのですが、お礼がしっかりといえていなかったようです。 (というか、確認画面でできたと思っていた。) ありがとうございました。 おかげで、無事無事動作させることができました。 また、子ウインドウで親ウインドウのフォーム内容を、typeとnameによって、すべて書き込むようなものを作成していたため、以下のようにして使用しました。これも大丈夫でした。 ありがとうございました。 ---(親ウインドウ)--- function addOption(sel,text,value){ sel.options[sel.options.length] = new Option(text,value); } ---(子ウインドウ)--- function AddOption(){ opener.addOption(opener.testForm.sel1,"D","V"); }

isobeman
質問者

補足

ご回答ありがとうございました。 おかげさまで、無事動作させることができました。 ありがとうございました。 (「御礼を言う」で入れた文章は、どこに行ってしまうの?)

関連するQ&A

  • IE6でプルダウンメニューをクリックするとその時に色が変わるようにして

    IE6でプルダウンメニューをクリックするとその時に色が変わるようにしていたのですが、 IE8でプルダウンメニューをクリックするとすぐに閉じてしまいます。 2回目のクリックでメニューが表示されます。 これはIEのバグなのでしょうか? また、他に良い方法あるのでしょうか? 以下がサンプルソースです。 <HTML> <HEAD> <TITLE>サンプル1</TITLE> </HEAD> <BODY> <CENTER> <FORM name="testForm"> <SELECT onFocus="style.backgroundColor='yellow'" onblur="style.backgroundColor='white'"> <OPTION>white</OPTION> <OPTION>red</OPTION> <OPTION>green</OPTION> <OPTION>blue</OPTION> </SELECT> </FORM> </CENTER> </BODY> </HTML>

  • HTMLでFORMのSELECTでの<OPTION>項目のみを別ファイ

    HTMLでFORMのSELECTでの<OPTION>項目のみを別ファイルとして管理したいがどうすればよいかご教授願いたく質問いたします。過去の,質問番号225151を参考にしましたが動きません。(select内ではSCRIPTは置けないとHPビルダーは言ってます)。 よろしく回答お願いいたします。

    • ベストアンサー
    • HTML
  • セレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい

    web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。 1. topページにセレクトボックスを設置。 2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。 3. 2を繰り返す。 このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。 script_test01.htmlの内容 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body> <script type='text/javascript' src='script_test01.js'> </script> <br> <form name='form_0'> <select onchange='rewrite()' name='sel_0'> <option>A or B</option> <option>A</option> <option>B</option> </select> </body> </html> -------------------------------------------------- script_test01.jsの内容 -------------------------------------------------- function rewrite() { var sel_in =document.form_0.sel_0.options.selectedIndex; var sel_name = document.form_0.sel_0.options[sel_in].text; document.write('<html>\n'); document.write('<head>\n'); document.write('<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">\n'); document.write("<script type='text/javascript' src='script_test01.js'>\n"); document.write("</script>\n"); document.write('</head>\n'); document.write('<body>\n'); document.write(sel_in,' : ',sel_name,'<br>\n'); /* ↓この部分がうまくいかない document.write('<br>\n'); document.write('<form name='form_0'>\n'); document.write('<select onchange='rewrite()' name='sel_0'>\n'); document.write('<option>A or B</option>\n'); document.write('<option>A</option>\n'); document.write('<option>B</option>\n'); document.write('</select>\n'); /* ↑この部分がうまくいかない document.write('</body>\n'); document.write('</html>\n'); } -------------------------------------------------- script_test01.jsのコメントアウトをはずすとエラーになります。 script_test01.js内でさらに自分自身を記述している部分辺りなど、なにかおかしなことをやっていのではという自覚はありますが、よくわかりません。 あわせて質問ですが、.htmlと.jsはEUCで作成しcharsetもEUC-JPを指定しています。 topページをブラウザのエンコードで確認すると当然「日本語[EUC]」となっていますが、セレクトボックス選択後書き換えられたページを確認すると、「Unicode」なっていますがなぜでしょうか?「日本語[EUC]」に出来ないでしょうか?

  • VBScriptでHTMLのForm内のselectをコントロールするには?

    javaScriptの例はたくさんあるので大よそは理解できたのですが、VBScriptでやるとうまく動きません。 document.form_name.id_name.options.length は効いているようです。 document.form_name.id_name.options[0].text document.form_name.id_name.options[0].value では値が入りません。 どうすれば動くでしょうか? ----test.html---- <script language="VBScript"> <!-- Sub change() document.term.minute.options.length = 1 document.term.minute.options[0].text = "aa" document.term.minute.options[0].value = "aa" End Sub // --> </script> <html> <head><title>test</title></head> <body> <form name="term" METHOD=POST ACTION="report.asp"> 時: <select onChange="change" name="hour"> <option>23 <option>24 </select> <BR> 分: <select name="minute"> <option>00 <option>10 <option>20 <option>30 <option>40 <option>50 </select> <input type=submit name="confirm" value="レポート"> </form> </body> </html>

  • 入力フォームでdisabledによる入力制限

    プルダウンをdisabledで制御しようと思っています。 yearを選択するまでmonthを無効にしたいのですが、うまくいきませんでした。 下記の簡略化したソースでも動作しませんでした。 テストでwindow.openを入れると動作するので、document...の文かとは思うのですが。 どなたかお気づきでしたら、お教え下さい。 よろしくお願い致します。 <html> <head> <title>inputtest</title> <SCRIPT LANGUAGE="JavaScript"> function menu_ctrl(){ var sel_num = document.sel_inp.year.selectedIndex; if(sel_num == 0){ document.sel_inp.month.disabled = false; // window.open("http://www.google.co.jp/"); } } </SCRIPT> </head> <body onload="menu_ctrl()"> <form name="sel_inp"> <select name="year" onchange="menu_ctrl()"> <option value="00" style="color:#AAAAAA">null</option> <option value="01">2007</option> <option value="02">2008</option> <option value="03">2009</option> </select> <select name="month"> <option value="00" style="color:#AAAAAA">null</option> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> </select> </form> </body> </html>

  • 連動セレクトボックスを同一ページにもう一つ追加したい

    今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。 説明下手ですみません・・ 例えばですけど htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:"02_11"}, {key:"小樽市",value:"02_12"}, {key:"その他市町村",value:"02_099"}], ["青森", {key:"青森市",value:"03_01"}, {key:"弘前市",value:"03_02"}, {key:"その他市町村",value:"03_099"}], ["岩手県", {key:"盛岡市 ",value:"04_01"}, {key:"宮古市",value:"04_02"}, {key:"その他市町村",value:"04_099"}], ["宮城県", {key:"石巻市",value:"05_06"}, {key:"塩竈市",value:"05_07"}, {key:"その他市町村",value:"05_099"}] ]; この他にもう一つ別窓で <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM2.MENUC.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM2.MENUD.length=0; for(var i=1; i<data[no].length; i++){ document.FORM2.MENUD.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM2"> <select name="MENUC" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUD" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["プログラミング", {key:"HTML",value:"11_01"}, {key:"JavaScript",value:"11_02"}, {key:"その他市",value:"11_099"}], ["データベース", {key:"Oracle",value:"12_01"}, {key:"MySQL",value:"12_02"}, {key:"その他市",value:"12_099"}] ]; と書いたセレクトリストをもう一つ追加したいのです。 が何度やっても上手くいきません。

  • JavaScript で動的に <SELECT>の<OPTION>を追加したい

    HTML の <FORM> の <SELECT> <OPTION VALUE="11">AAA</OPTION> の<OPTION >を JavaScript で設定しようと考えています。 方法ご存知の方いらっしゃいましたら、御教授願います。 また、JavaScript のメソッド/プロパティが網羅的に記述されている Web Page 等ありましたら、ぜひURLを教えてください。 よろしくお願い致します。

  • プルダウンに追加項目を加える方法

    過去記事にあった下記のプルダウンを使用させて頂いております。 選択できる項目を「くだもの→りんご→●●」ともうひとつ追加 するにはどうしたらよいのでしょうか? どうぞよろしくお願いします。 <html> <head> <script> <!-- /* データ定義部(ここをDB検索結果から生成) */ var dataMain = new Array(   new Array("1", "くだもの"),   new Array("2", "やさい"),   new Array("3", "さかな") ); var dataSub = new Array(   new Array(     new Array("1", "りんご"),     new Array("2", "みかん"),     new Array("3", "いちご")   ),   new Array(     new Array("1", "にんじん"),     new Array("2", "だいこん"),     new Array("3", "きゅうり")   ),   new Array(     new Array("1", "さば"),     new Array("2", "いわし"),     new Array("3", "さんま")   ) ); // プルダウンを初期化 function initSel() {   var selMain = document.forms[0].elements["selMain"];   // メインのプルダウンを初期化   setDataToSel(selMain, dataMain);   // 先頭を選択   selMain.selectedIndex = 0;   // 先頭を選択したのと同じ処理   changeSel(); } // プルダウンを選択したときの処理 function changeSel() {   var selMain = document.forms[0].elements["selMain"];   var selSub = document.forms[0].elements["selSub"];   // メインのプルダウンの選択値によりサブの選択肢データを取得   var data = dataSub[selMain.selectedIndex];   // サブのプルダウンの選択肢を入れ換え   setDataToSel(selSub, data); } // データを選択肢にセット function setDataToSel(sel, data) {   // 選択肢をいったんクリア   for(var i = 0 ; i < sel.options.length ; i++) {    sel.options[i] = null;   }   // 新しい選択肢を作る   for(var i = 0 ; i < data.length ; i++) {   var dt = data[i];    sel.options[i] = new Option(dt[1], dt[0]);   } } //--> </script> </head> <body onLoad="initSel()">  <form>   <p>    メイン:    <select name="selMain" size="1" onChange="changeSel()"></select>   </p>   <p>    サブ:    <select name="selSub" size="1"></select>   </p>  </form> </body> </html>

  • javascriptで取得した値を、FORMで送信する

    いつもお世話になっております。 jspからwindow.openを使い、別ウインドウを表示しました。 別ウインドウでの質問です。 javascriptで前のページ(jsp)の情報を受け取り、それを次のページ(jsp)へFORM(POST)で送りたいのですが、うまくいきません。 ご教授下さい。 <HTML> <HEAD> <script type="text/javascript"> <!-- function sent() { var num = window.opener.document.aaa.number01.value; ここで前ウィンドウの情報を取得しています return num; } function sub() { document.bbb.submit(); } // --> </script> </HEAD> <BODY onload="sub()"> <form name="bbb" METHOD="POST" action="http://okwave.jp"> <input type="hidden" name="timeid" value=""> <input type="hidden" name="number00" value="1"> <input type="hidden" name="number01" value="sent()"> <!--<input type="hidden" name="number01" value="204038054776">--> 当たり前ですが、コメントにしている部分にすると次のページでうまくいきます。 </form> </BODY> </HTML>

  • SELECTボックスの内容を動的に変えるには

    2つのSELECTボックスを用意し、1つ目のSELECTボックスの内容により 2つめのSELECTボックスの内容(項目数も含め)を変える方法を教えてください。 下記のようなHTMLを作ってみましたが、2つ目のSELECTボックスに項目がないため「オブジェクトがありません」のエラーが出ます。 ------------------------------------------------------- <html> <head> <SCRIPT language="vbscript"> <!-- option explicit sub selchng() dim strsel strsel = sel1.selectedIndex Select Case strsel Case "1" sel2.item(0).value = "1" sel2.item(0).text = "1" sel2.item(1).value = "2" sel2.item(1).text = "2" Case "2" sel2.item(0).value = "a" sel2.item(0).text = "a" sel2.item(1).value = "b" sel2.item(1).text = "b" sel2.item(2).value = "c" sel2.item(2).text = "c" Case else sel2.item(0).value = "A" sel2.item(0).text = "A" End Select end sub --> </SCRIPT> </head> <body> <select name="sel1" onchange=selchng()> <option value="1" selected>1</option> <option value="2" >2</option> <option value="3" >3</option> </select> <select name="sel2"> </select> </body> </html>