dポイントプレゼントキャンペーン実施中！

別ウインドウからフォームを操作するには

解決済

  • 質問者：shouji_s
  • 質問日時：
  • 回答数：3件

　簡単な質問かもしれませんがご教授お願いいたします。
　HTMLページで下図のようなフォームを作成したいと考えています。

　図:
　┌────────┬─┐　┏━━━┓
　│リストフォーム　　　│▼│　┃ボタン　┃
　└────────┴─┘　┗━━━┛
　　・項目１　　　　　　　　　　　　　　　↓　1.押すと新しいウィンドウが表示
　　・項目２　　　　　　　　　　　┏━━━━━━━━━━━┳┳┓
　　・項目３　←────┐　┣━━━━━━━━━━━┻┻┫
　　・項目４　　　　　　　　│　┃　　　　　　　　　　　　　　　　　　　┃
　　　　　∥　　　　　　　　│　┃　・項目１　　　　　　　　　　　　　　┃
　　　　　∥　　　　　　　　│　┃　・項目２　　　　　　　　　　　　　　┃
　　　　　∥　　　　　　　　└─╂-・項目３　←　2.リンクになっていて押すと...
　　　　　∥　　　　　　　　　　　┃　・項目４　　　　　　　　　　　　　┃
　　　　　∥　　　　　　　　　　　┃　　　　　　　　　　　　　　　　　　　┃
　　　　　∥　　　　　　　　　　　┗━━━━━━━━━━━━━┛
　　　　　∥
　　　　　∥　3.　新しいウィンドウが消えて
　　　　　↓
　┌────────┬─┐　┏━━━┓
　│項目 ３　　　　　　　│▼│　┃ボタン　┃
　└────────┴─┘　┗━━━┛　
　4.　項目３が選ばれている。

　これをJavascriptで実現する方法がかかれたホームページがあったのですが，つい最近消えてしまったので，方法を探しています。
　この方法がサンプルとして紹介されているページや，または，実現する方法を教えていただけないでしょうか。
　よろしくお願いいたします。
　（図が見づらくてすいません）

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： lead1976
  • 回答日時：

子ウィンドウから親ウィンドウにアクセスする場合には、window.openerと言うプロパティが親ウィンドウを指すプロパティになりますので、これを利用すればよいと思います。


具体的には、子ウィンドウ内で「window.opener.document.form1.select1.options[x].selected=true;」という処理を定義して実行すれば、親ウィンドウ内のform1という名前のフォーム内の、select1と言う名前のプルダウンメニューのx番目のoptionを選択した状態にすることができると思います。 なお、このときのx番目は、0から始まる連番で指定します(最初の項目が(x=0)番目にあたります)。

具体的なアドバイスですが、質問の動作を実現するソースの例を書きます。
親ウィンドウ内のセレクトメニューは、以下のようにしてください。

<form name="f1">
<select name="s1">
<option>リストフォーム</option>
<option value="項目1">項目1</option>
<option value="項目2">項目2</option>
<option value="項目3">項目3</option>
<option value="項目4">項目4</option>
<option value="項目5">項目5</option>
</select>
</form>

formに「f1」、selectに「s1」と言う名前を与えておきます。
子ウィンドウのソースは、以下のようにしてみてください。

<html>
<head>
<script type="text/javascript">
<!--
function checksel(v){
if (window.opener){
for (i=0; i<window.opener.document.f1.s1.options.length; i++){
if (window.opener.document.f1.s1.options[i].value==v){
window.opener.document.f1.s1.options[i].selected=true;
}
}
}
window.close();
}
//-->
</script>
</head>
<body>

<p>・<a href="#" onClick="checksel('項目1'); return false;">項目1</a><br>
・<a href="#" onClick="checksel('項目2'); return false;">項目2</a><br>
・<a href="#" onClick="checksel('項目3'); return false;">項目3</a><br>
・<a href="#" onClick="checksel('項目4'); return false;">項目4</a><br>
・<a href="#" onClick="checksel('項目5'); return false;">項目5</a><br></p>

</body>
</html>

こちらのソースでは、head内でchecksel(v)と言う関数を定義しています。 この関数は、呼び出されるとまず親ウィンドウが開いているかどうかをチェックし、親ウィンドウがある場合には、その親ウィンドウにあるf1と言うフォーム内のs1と言う名前の要素にアクセスし、その中のoptionを一つ一つチェックしていきます。 このとき、関数の呼び出し側から渡された引数の値を、親ウィンドウのs1の持つoption要素のvalueと照合し、一致した場合にはそのメニューを選択した状態にします。
上記の処理が終わったあとには、子ウィンドウ自身を閉じるようにしてあります。

関数を呼び出す側のリンクは、onClickで関数を呼び出すように記述しています。 このとき、checksel()を呼び出す時に、選択状態にしたいoption要素が持つvalue値を引数として渡すように記述する必要があります。

長くなりましたが、参考になれば…
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： mld_sakura
  • 回答日時：

丁寧な説明で大変分かりやすいです^^



ここのサイトの「ウィンドゥ」あるいは「サブウィンドゥ」項を参考にしてください。
http://www.openspc2.org/reibun/javascript/

参考URL：http://www.openspc2.org/reibun/javascript/
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： Struts
  • 回答日時：

下記URLのsamplesのブラウザ属性が参考になると思います。



参考URL：http://www.usagi-js.com/
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報