Mengisi Listbox dari Listbox yang Lain

1. Buat Javascript dan simpan dengan movelist.js

function insertSelectList(ListDest,ListSource) {
    if(ListSource.options.length > 0) {
       	for(i=ListSource.options.length-1;i>=0;i--) {
            if (ListSource.options[i].selected){
				addOption(ListDest, ListSource.options[i].value, ListSource.options[i].text);
				ListSource.remove(i);
            }
        }
	}
}

function insertAllList(ListDest,ListSource)
{
	var i;
	for(i=ListSource.options.length-1;i>=0;i--)
	{
			addOption(ListDest, ListSource.options[i].value, ListSource.options[i].text);
			ListSource.remove(i);
	}
}

function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}

2. Buat html dan simpan dengan movelist.html

<html>
<head>
<title>Movelist</title>
<script language="javascript" src="movelist.js"></script>
</head>
<body>
<FORM name="pindah" method="POST">
<table>
<tr>
	<td>
		<SELECT  NAME="list1" id="list1" multiple size="5"></SELECT>
	</td>
	<td align="left">
		<input type="button" value=">>" onClick="insertAllList(document.pindah.list2,document.pindah.list1)"/><br>
		<input type="button" value=">"  onClick="insertSelectList(document.pindah.list2,document.pindah.list1)" />
	</td>
	<td align="right">
		<input type="button" value="<" onClick="insertSelectList(document.pindah.list1,document.pindah.list2)" /><br>
		<input type="button" value="<<" onClick="insertAllList(document.pindah.list1,document.pindah.list2)"/>
	</td>
	<td>
		<SELECT  NAME="list2" id="list2" multiple size="5">
		<Option value="1">A1</option>
		<Option value="2">A2</option>
		<Option value="3">A3</option>
		<Option value="4">A4</option>
		<Option value="5">A5</option>
		</SELECT>
	</td>
</tr>
</table>
</FORM>
</body>
</html>

Tinggalkan Balasan