[HTML/JavaScript] Select list move options
DEVELOPMENT/Javascript2009. 8. 11. 14:12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript" type="text/javascript">
<!--
var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);
/**
* option 추가
**/
function addOption(theSel, theText, theValue){
var newOpt = new Option(theText, theValue);
var selLength = theSel.length;
theSel.options[selLength] = newOpt;
}
/**
* option 삭제
**/
function deleteOption(theSel, theIndex){
var selLength = theSel.length;
if(selLength>0){
theSel.options[theIndex] = null;
}
}
/**
* option 삭제
**/
function moveOptions(theSelFrom, theSelTo){
var selLength = theSelFrom.length;
var selectedText = new Array();
var selectedValues = new Array();
var selectedCount = 0;
var i;
// Find the selected Options in reverse order
// and delete them from the 'from' Select.
for(i=selLength-1; i>=0; i--){
if(theSelFrom.options[i].selected){
selectedText[selectedCount] = theSelFrom.options[i].text;
selectedValues[selectedCount] = theSelFrom.options[i].value;
deleteOption(theSelFrom, i);
selectedCount++;
}
}
// Add the selected text/values in reverse order.
// This will add the Options to the 'to' Select
// in the same order as they were in the 'from' Select.
for(i=selectedCount-1; i>=0; i--){
addOption(theSelTo, selectedText[i], selectedValues[i]);
}
if(NS4) history.go(0);
}
/**
* option 추가
**/
function addOption(theSel, theText, theValue){
var newOpt = new Option(theText, theValue);
var selLength = theSel.length;
theSel.options[selLength] = newOpt;
}
/**
* option 삭제
**/
function deleteOption(theSel, theIndex){
var selLength = theSel.length;
if(selLength>0){
theSel.options[theIndex] = null;
}
}
/**
* option 삭제
**/
function moveOptions(theSelFrom, theSelTo){
var selLength = theSelFrom.length;
var selectedText = new Array();
var selectedValues = new Array();
var selectedCount = 0;
var i;
// Find the selected Options in reverse order
// and delete them from the 'from' Select.
for(i=selLength-1; i>=0; i--){
if(theSelFrom.options[i].selected){
selectedText[selectedCount] = theSelFrom.options[i].text;
selectedValues[selectedCount] = theSelFrom.options[i].value;
deleteOption(theSelFrom, i);
selectedCount++;
}
}
// Add the selected text/values in reverse order.
// This will add the Options to the 'to' Select
// in the same order as they were in the 'from' Select.
for(i=selectedCount-1; i>=0; i--){
addOption(theSelTo, selectedText[i], selectedValues[i]);
}
if(NS4) history.go(0);
}
//-->
</script>
</script>
</HEAD>
<BODY>
<form action="yourpage.asp" method="post">
<table border="0">
<tr>
<td>
<select name="sel1" size="10" multiple="multiple">
<option value="1">Left1</option>
<option value="2">Left2</option>
<option value="3">Left3</option>
<option value="4">Left4</option>
<option value="5">Left5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" value="-->"
onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
<input type="button" value="<--"
onclick="moveOptions(this.form.sel2, this.form.sel1);" />
</td>
<td>
<select name="sel2" size="10" multiple="multiple">
<option value="1">Right1</option>
<option value="2">Right2</option>
<option value="3">Right3</option>
<option value="4">Right4</option>
<option value="5">Right5</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
<form action="yourpage.asp" method="post">
<table border="0">
<tr>
<td>
<select name="sel1" size="10" multiple="multiple">
<option value="1">Left1</option>
<option value="2">Left2</option>
<option value="3">Left3</option>
<option value="4">Left4</option>
<option value="5">Left5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" value="-->"
onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
<input type="button" value="<--"
onclick="moveOptions(this.form.sel2, this.form.sel1);" />
</td>
<td>
<select name="sel2" size="10" multiple="multiple">
<option value="1">Right1</option>
<option value="2">Right2</option>
<option value="3">Right3</option>
<option value="4">Right4</option>
<option value="5">Right5</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
출처 : http://www.mredkj.com/tutorials/tutorial_mixed2b.html
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| [javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |
|---|---|
| [prototype.js] Element 생성하기 (0) | 2009.09.09 |
| [HTML/JavaScript ]select box option 추가 삭제 예제 (0) | 2009.08.11 |
| HTML 특수문자코드표 (0) | 2009.07.22 |
| [Event] observe 에서의 onload와 dom:loaded 의 차이 (0) | 2009.05.21 |
