| ポイント |
<![CDATA[
for (i=0; i<document.myFORM.mySEL.options.length; i++) document.myFORM.mySEL.options[i] = null;
for (i=0; i<nameList.length; i++) document.myFORM.mySEL.options[i] = new Option(nameList[i],nameList[i]);
]]>
|
| 説 明 |
データを追加／削除し表示するには登録時にデータを配列に格納しておきます。削除時は配列内にあるデータと入力文字が一致するかどうか調べて一致しない場合のみ新しい配列にデータを入れていきます。新しい配列から元のデータが格納された配列にデータをコピーすれば特定のデータが削除されます。フレームごしに表示するために配列内のデータをフォームのセレクトメニュー項目に削除後に追加していきます。削除はoption項目にnullを代入します。追加はnew Option()を使います。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを追加／削除する</title>
</head>
<body>
<form>
<input type="button" value="ABCさん" onClick="parent.rightFrame.setData('ABC')">
<input type="button" value="DEFさん" onClick="parent.rightFrame.setData('DEF')">
<input type="button" value="GHIさん" onClick="parent.rightFrame.setData('GHI')">
<input type="button" value="JKLさん" onClick="parent.rightFrame.setData('JKL')">
</form>
</body>
</html>
]]>
|
| 補足説明 |
他フレームにデータを渡すにはいくつか方法がありますがセキュリティの都合で簡単にフレーム内のオブジェクトが操作しにくくなってきています。同一ドメイン内でないとデータの受け渡しはできません。
フレーム分割のページ等の内容は以下の通りです。
<![CDATA[
●フレーム分割ページ
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを追加／削除する</title>
<frameset cols="20%,*">
<frame src="code_left.html">
<frame src="code_right.html" name="rightFrame">
</frameset>
</head>
</html>
●左側のページ(code_left.html)
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを追加／削除する</title>
</head>
<body>
<form>
<input type="button" value="ABCさん" onClick="parent.rightFrame.setData('ABC')">
<input type="button" value="DEFさん" onClick="parent.rightFrame.setData('DEF')">
<input type="button" value="GHIさん" onClick="parent.rightFrame.setData('GHI')">
<input type="button" value="JKLさん" onClick="parent.rightFrame.setData('JKL')">
</form>
</body>
</html>
●右側のページ(code_right.html)
<html>
<head>
<title>フレームをまたいでフォームに入力されたデータを追加／削除する</title>
<script language="JavaScript"><!--
nameList = new Array();
tempList = new Array();
ptr = 0;
function setData(userName)
{
nameList[ptr++] = userName;
for (i=0; i<document.myFORM.mySEL.options.length; i++) document.myFORM.mySEL.options[i] = null;
for (i=0; i<nameList.length; i++) document.myFORM.mySEL.options[i] = new Option(nameList[i],nameList[i]);
}
function clrData()
{
n = document.myFORM.mySEL.selectedIndex;
text = document.myFORM.mySEL.options[n].value;
cnt = 0;
for (i=0; i<ptr; i++)
{
if (text != nameList[i]) tempList[cnt++] = nameList[i];
}
nameList.length = 0;
if (cnt > 0) for (i=0; i<cnt; i++) nameList[i] = tempList[i];
ptr = cnt;
for (i=0; i<document.myFORM.mySEL.options.length; i++) document.myFORM.mySEL.options[i] = null;
for (i=0; i<nameList.length; i++) document.myFORM.mySEL.options[i] = new Option(nameList[i],nameList[i]);
}
// --></script>
</head>
<body>
追加／削除されたデータが表示されます。
<form name="myFORM">
<select multiple name="mySEL" style="width:100pt">
<option></option>
</select>
<br>
<input type="button" value="削除" onClick="clrData()">
</form>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
フレームをまたいでフォームに入力されたデータを追加／削除する