셀렉트박스에 추가, 삭제, 위로 아래로 선택항목 이동하는 예제

<script type="text/javascript">
<!--
	// 선택한 항목 삭제
	function removeItem(str){
		var frm = document.form1;
		var o = frm.elements[str];
		var idx = o.selectedIndex;
		if(idx == -1) return;
		o.options.remove(idx);
		o.selectedIndex = idx - 1;
		if(idx - 1 < 0)o.selectedIndex = 0;
	}

	// 선택한 항목 모두 삭제
	function removeAllItem(str){
		var frm = document.form1;
		var o = frm.elements[str];
		if(o.length == 0) return;

		var loop = o.length;
		for (var i=0 ; i < loop ; i++){
			o.options.remove(0);
		}
	}

	// 항목 추가
	function addItem(str){
		var frm = document.form1;
		var o = frm.gayo;
		frm.elements[str].options.add(new Option(o.options[o.selectedIndex].text, o.options[o.selectedIndex].value));
	}

	// 선택한것 올리기
	function moveUp(str){
		var frm = document.form1;
		var o = frm.elements[str];
		var idx = o.selectedIndex;

		if(idx == -1) return;
		if(idx > 0){
			var text = o.options[idx].text;
			var value = o.options[idx].value;

			o.options[idx].text = o.options[idx - 1].text
			o.options[idx].value = o.options[idx - 1].value

			o.options[idx - 1].text = text;
			o.options[idx - 1].value = value;

			o.selectedIndex = idx - 1;
		}
	}

	// 선택한것 내리기
	function moveDown(str){
		var frm = document.form1;
		var o = frm.elements[str];
		var idx = o.selectedIndex;

		if(idx == -1) return;
		if(idx < o.length-1){
			var text = o.options[idx].text;
			var value = o.options[idx].value;

			o.options[idx].text = o.options[idx + 1].text
			o.options[idx].value = o.options[idx + 1].value

			o.options[idx + 1].text = text;
			o.options[idx + 1].value = value;

			o.selectedIndex = idx + 1;
		}
	}
//-->
</script>

<form name="form1" method="get" action="">
<table border="0" style="font-size:9pt;" cellpadding="3" cellspacing="0" align="center">
	<tr>
		<td align="center">
			<select name="gayo" size="1">
				<option value="1">그 사람 찾으러 간다</option>
				<option value="2">부끄부끄</option>
				<option value="3">유쾌상쾌통쾌</option>
				<option value="4">MY WAY</option>
				<option value="5">화이팅(FIGHTING)</option>
				<option value="6">장윤정 트위스트</option>
				<option value="6">총맞은 것처럼</option>
			</select>
			<input type="button" value="1에 추가" onclick="addItem('select1')"> <input type="button" value="2에 추가" onclick="addItem('select2')">
		</td>
	</tr>

	<tr>
		<td align="center">추가 버튼을 누르세요~</td>
	</tr>

	<tr>
		<td align="center">

		<table border="0" cellpadding="5" cellspacing="1" style="font-size:9pt;" bgcolor="#999999">
			<tr>
				<td colspan="2" align="center" bgcolor="#E2E2E2"><b>1</b></td>
				<td colspan="2" align="center" bgcolor="#E2E2E2"><b>2</b></td>
			</tr>
			<tr>
				<td align="center" bgcolor="white"><select name="select1" size="10" style="width:200px;"></select></td>
				<td align="center" bgcolor="white">
					<input type="button" value=" ▲ " onclick="moveUp('select1')"><br>
					<input type="button" value=" ▼ " onclick="moveDown('select1')"><br>
					<input type="button" value="삭제" onclick="removeItem('select1')">
				</td>
				<td align="center" bgcolor="white"><select name="select2" size="10" style="width:200px;"></select></td>
				<td align="center" bgcolor="white">
					<input type="button" value=" ▲ " onclick="moveUp('select2')"><br>
					<input type="button" value=" ▼ " onclick="moveDown('select2')"><br>
					<input type="button" value="삭제" onclick="removeItem('select2')">
				</td>
			</tr>
			<tr>
				<td align="center" colspan="4" bgcolor="white">					
					<input type="button" value="모두삭제" onclick="removeAllItem('select1');removeAllItem('select2')"></td>
			</tr>
		</table>

		</td>
	</tr>
</table>
</form>