Home » パソコン » 言語 etc... » JavaScript » [Javascript] Tips » [JavaScript] （動的に）項目の追加と削除
| Index |
[JavaScript] （動的に）項目の追加と削除
二つのフィールド （ SELECT BOX ） 間で項目の追加・削除を簡単に行うためのスクリプト。
一方をリスト、他方を選択項目として、リスト側の SELECT BOX の項目を for ループなどで DB の項目を表示する、選択側をブランク（または初期値）にしておくなどで、フォーム作成に利用可能。
ただし、次画面への送信には、JavaScript で取得した値を hidden フィールドに代入してから submit する必要がある。
※ 画面がリロードされると初期状態に戻るので、その点は要注意。
－－－－－－スクリプト－－－－－－
<SCRIPT language=”JavaScript”> <!– function addItem(){// 追加 if (document.docForm.item2.value == “”) return; for (i = 0; i < document.docForm.item2.length; i++) { if (document.docForm.item2.options[i].selected) { var txt = document.docForm.item2.options[i].value; // 追加（item1） var len = document.docForm.item1.length; document.docForm.item1.options[len] = new Option(txt, txt); // 削除（item2） document.docForm.item2.options[i] = null; i–; } } } function deleteItem(){// 削除 if (document.docForm.item1.length == 0 || document.docForm.item1.selectedIndex == -1) return; for (i = 0; i < document.docForm.item1.length; i++) { if (document.docForm.item1.options[i].selected) { var txt = document.docForm.item1.options[i].value; // 削除（item1） document.docForm.item1.options[i] = null; // 追加（item2） var len = document.docForm.item2.length; document.docForm.item2.options[len] = new Option(txt, txt); i–; } } } function toNext(){ var v=”"; for (i = 0; i < document.docForm.item1.length; i++) { v = v + “,” + document.docForm.item1.options[i].value; } document.docForm.item.value = v; //document.docForm.action = “inputtop.asp”; //document.docForm.target = “right”; document.docForm.submit(); } // –> </SCRIPT> |
－－－－－－フォーム－－－－－－
<FORM name=”docForm” action=”TEST.php” method=”get”> <table> <tr> <td width=”100″> <SELECT name=”item2″ size=”20″ multiple> <OPTION value=”ラーメン”>ラーメン</OPTION> <OPTION value=”ギョウザ”>ギョウザ</OPTION> <OPTION value=”カラアゲ”>カラアゲ</OPTION> <OPTION value=”チャーハン”>チャーハン</OPTION> <OPTION value=”ヤキソバ”>ヤキソバ</OPTION> </SELECT> </td> <td width=”50″> <INPUT type=”button” value=”追加→” onClick=”addItem();”><BR> <BR> <INPUT type=”button” value=”←削除” onClick=”deleteItem();”><BR> </td> <td width=”100″> <SELECT name=”item1″ size=”20″ multiple> <OPTION value=”サラダ”>サラダ</OPTION> <OPTION value=”パスタ”>パスタ</OPTION> <OPTION value=”スープ”>スープ</OPTION> <OPTION value=”ステーキ”>ステーキ</OPTION> <OPTION value=”ジェラート”>ジェラート</OPTION> </SELECT> <input type=”hidden” name=”item” value=”"> </td> </tr> </table> <BR> <BR> <input name=”" type=”button” value=”送信” onClick=”toNext()”> </FORM> |