備忘録的プログラミングリファレンス

IFRAMEを使った一覧選択

 IFRAMEを使った一覧選択の作成方法の説明です。別のファイルの表またはリストを IFRAME で表示します。項目の選択には JavaScript を利用します。

 以下にある動作の確認を参照してみてください。IFRAMEを使った一覧選択の動作確認できます。

作成の方法

 入力項目がフォーカスされると選択肢が一覧表示されます。一覧表示にはIFRAMEを用いています。

 表示位置が親エレメントの左上端が(0,0)の位置になるようにiframeなどのエレメントを配置しています。
親エレメントにposition:relative;を、iframeを用いるエレメントはposition:absolute;を指定します。ここではオーバーラップのdivエレメントに指定しています。 top、leftで位置を調整します。

 iframe で表示される一覧は別に設けたページです。そのページにおいて、クリックで入力項目を補完するように選択肢にスクリプトを埋め込みます。 クリックすると選択肢は非表示になります。
 選択肢の1行ずつにスクリプトを設定してます。ここではTRエレメントに設定しています。

<tr onClick="parent.document.example_form.example_00.value=document.getElementsByName('list_data')[0].innerText;parent.document.getElementById('example_list_00').style.visibility='hidden';">

 XSLでは以下のように設定します。XMLファイルからtitleデータを読み込んでの方法です。

<xsl:for-each select='list/data'>
<xsl:element name='tr'>

<xsl:attribute name='name'>data_line</xsl:attribute>
<xsl:attribute name='onClick'>
parent.document.example_form.example_00.value="<xsl:value-of select='title'/>";
parent.document.getElementById("example_list_00").style.visibility="hidden";
</xsl:attribute>
...

 選択肢は最初は全てCSSで非表示にしています。そして、入力項目がフォーカスされると該当する一覧を表示し、別の入力項目がフォーカスされると開いていた一覧を閉じて該当する一覧を表示します。

 外部ファイルから選択肢を取得する、例えばXMLデータを反映する場合に簡易作成できます。
 JavaScriptを使って選択肢を別ファイルから読み込む方法もあります。

動作の確認

cssあり/なし、scriptあり/なしを選択することができます。

別ページで開きます。

HTML

 

css

 

JavaScript