JavaScriptで親画面のセレクトボックスに子画面から値を追加する
以下にJavaScriptで親画面のセレクトボックスに子画面で入力した値を追加する方法を記す。
IE7でのみ検証。
通常はセレクトボックスにある選択肢を選びたいが
まれに、自分で入力した値を選択したい。という要望があった。
それに対して自分は以下のように対応した。
- セレクトボックスの横にボタンを用意する。
- ボタンを押すと子画面を表示する。
- 子画面で値を入力する。
- 入力した値がセレクトボックスに選択状態で追加される。
実装方法
以下のように単純に子画面から親画面のセレクトボックスを取得して要素を追加しようとすると
エラー:インターフェイスがサポートされていません。
というエラーが発生してしまう。
// ×子画面から直接追加する function addOptionBad() { var select = window.opener.document.getElementById('Select'); var option = document.createElement("option"); option.value = "value"; option.appendChild(document.createTextNode("text")); option.title = "tips"; // ここでエラーが発生する(原因は調べていない) select.appendChild(option); }
なので、親画面に要素を追加するメソッドをおいて、
子画面からそのメソッドを呼び出す。
// ○子画面からは親画面のメソッドを呼び出す window.opener.addOption('id', 'text', 'value', 'title'); // 親画面にメソッドを定義する function addOption(targetId, text, value, tips) { var select = window.document.getElementById('Select'); var option = document.createElement("option"); option.value = value; option.appendChild(document.createTextNode(text)); option.title = tips; select.appendChild(option); }
addOptionはidで指定したセレクトボックスに引数で構成される要素を追加するメソッド。
親画面に実装しておく。
細かいコードは今手元にないので、後で書き足す。
11/30 書き足した。