RadarURL
웹 프로그래밍

javascript 선택된 select option 값을 읽어서 다른 select 에 나타내기

by JaeSoo posted Jun 26, 2007
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

<html>
<head>


<SCRIPT LANGUAGE="JavaScript">


 function moveOver() {
 var boxLength = document.choiceForm.choiceBox.length;
 var selectedItem = document.choiceForm.available.selectedIndex;
 var selectedText = document.choiceForm.available.options[selectedItem].text;
 var selectedValue = document.choiceForm.available.options[selectedItem].value;
 var i;
 var isNew = true;
  if (boxLength != 0) {
   for (i = 0; i < boxLength; i++) {
    thisitem = document.choiceForm.choiceBox.options[i].text;
     if (thisitem == selectedText) {
      isNew = false;
      break;
     }
    }
  }
  if (isNew) {
   newoption = new Option(selectedText, selectedValue, false, false); 
   document.choiceForm.choiceBox.options[boxLength] = newoption;
  }
  document.choiceForm.available.selectedIndex=-1;
 }


 function removeMe() {
 var boxLength = document.choiceForm.choiceBox.length;
  arrSelected = new Array();
 var count = 0;
  for (i = 0; i < boxLength; i++) {
   if (document.choiceForm.choiceBox.options[i].selected) {
    arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
   }
   count++;
  }
 var x;
  for (i = 0; i < boxLength; i++) {
   for (x = 0; x < arrSelected.length; x++) {
    if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
     document.choiceForm.choiceBox.options[i] = null;
       }
   }
   boxLength = document.choiceForm.choiceBox.length;
     }
 }


</script>
</HEAD>
<BODY>


<center>
<form name="choiceForm">
<table border=0>
<tr>
<td valign="top" width=175>


<br>
<select name="available" style="width:150" size=10 onchange="moveOver();">
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
</select>
</td>
<td valign="top">


<br>
<select multiple name="choiceBox" style="width:150;" size="10">
</select>
</td>
</tr>
<tr>
<td colspan=2 height=10>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="제거" onclick="removeMe();">
</td>
</tr>
</table>
</form>
</center>

출처 : http://kin.naver.com/db/detail.php?d1id=1&dir_id=10102&eid=qRFjj/3N857kDnf/QEEU/RNP2SxZiBso&qb=c2VsZWN0IG9wdGlvbiBmb3Jt


Articles

1 2 3 4 5 6 7 8 9 10