jQuery 子ウィンドウから親ウィンドウに値を渡す

  • このエントリーをはてなブックマークに追加
  • Pocket

window.open()で新しく開いたウィンドウから元のウィンドウに対して値を渡す方法のメモ。

具体的には以下を実現する備忘録。

  • 親ウィンドウから子ウィンドウを開く
  • 子ウィンドウからデータを親に渡す
  • 子のデータをもとに親のセレクトボックスの値を変更する

やりたいこと

スクリーンショット 2015-12-17 19.08.35

セレクトボックス1の隣にある[open]ボタンを押して子ウィンドウを表示する。
スクリーンショット 2015-12-17 19.09.52

子ウィンドウのラジオボタンの値を親に渡す。
この場合だと子ウィンドウで「ウェアウルフ」を選択。

スクリーンショット 2015-12-17 19.10.33

同胞団万歳!

親から子へ 子から親へ

親のHTML

いつもながらCSSはBootstrap。

親のjs

子のHTML

子のjs

親の setSelect() 関数を呼んでるが、メソッドの呼び出しではなく直接セレクトボックスを操作することも可能。

ただ、親で動的に要素を作成している場合だとどのセレクトボックスを操作すればいいかが難しかったので、子はデータを渡すだけにした。

デモ

こちらから。

動作はIE8、chromeで確認。
IE8で動くので大体大丈夫だと思われる。

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*