ABOUT ME

Professional -1

Today
Yesterday
Total
  • 셀렉트 박스 선택한 것이 다음 셀렉트 박스로 이동하게끔 하기
    프로그램/JavaScript 2008. 8. 28. 14:00

    <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>

Designed by Tistory.