JavaScript Dual ListBox

자바스크립트 개발에서 거의 빠지지 않는 코드가

바로 Dual ListBox 컨트롤이다...  코드관리나  그룹관리에서 A group에서 B group으로 이동하거나

위치를 바꾸거나... 사용용도는 상당히 빈번한다.

자 그럼 소스를 보자

<script type="text/javascript"> 

    function addItems() {

      var ai = document.getElementById("availableItems");

      var si = document.getElementById("selectedItems");

      for (i=0;i<ai.options.length;i++) {

        if (ai.options[i].selected) {

          var opt = ai.options[i];

          si.options[si.options.length] = new Option(opt.innerHTML, opt.value);

          ai.options[i] = null;

          i = i - 1;

        }

      }

    }

   

    function addAll() {

      var ai = document.getElementById("availableItems");

      var si = document.getElementById("selectedItems");

      for (i=0;i<ai.options.length;i++) {

        var opt = ai.options[i];

        si.options[si.options.length] = new Option(opt.innerHTML, opt.value);

      }

      ai.options.length = 0;

    }

      

    function removeItems() {

      var ai = document.getElementById("availableItems");

      var si = document.getElementById("selectedItems");

      for (i=0;i<si.options.length;i++) {

        if (si.options[i].selected) {

          var opt = si.options[i];

          ai.options[ai.options.length] = new Option(opt.innerHTML, opt.value);

          si.options[i] = null;

          i = i - 1;

        }

      }

      sortAvailable();

    }

    

    function removeAll() {

      var ai = document.getElementById("availableItems");

      var si = document.getElementById("selectedItems");

      for (i=0;i<si.options.length;i++) {

        var opt = si.options[i];

        ai.options[ai.options.length] = new Option(opt.innerHTML, opt.value);

      }

      si.options.length = 0;

      sortAvailable();

    }

   

    function moveUp() {

      var si = document.getElementById("selectedItems");

      var sel = si.selectedIndex;

      if (sel > 0) {

           var optHTML = si.options[sel].innerHTML;

           var optVal = si.options[sel].value;

           var opt1HTML = si.options[sel-1].innerHTML;

           var opt1Val = si.options[sel-1].value;

           si.options[sel] = new Option(opt1HTML,opt1Val);

           si.options[sel-1] = new Option(optHTML,optVal);

           si.options.selectedIndex = sel -1;

      }

    }

   

    function moveDown() {

      var si = document.getElementById("selectedItems");

      var sel = si.selectedIndex;

      if (sel < si.options.length -1) {

           var optHTML = si.options[sel].innerHTML;

           var optVal = si.options[sel].value;

           var opt1HTML = si.options[sel+1].innerHTML;

           var opt1Val = si.options[sel+1].value;

           si.options[sel] = new Option(opt1HTML,opt1Val);

           si.options[sel+1] = new Option(optHTML,optVal);

           si.options.selectedIndex = sel +1;

      }

    }

 

    function sortAvailable() {

      var ai = document.getElementById("availableItems");

      var tmp = "";

      for (i=0;i<ai.options.length;i++) {

        if (tmp > "") tmp +=",";

        tmp += ai.options[i].innerHTML + "~" + ai.options[i].value;

      }

      var atmp = tmp.split(",")

      atmp = atmp.sort();

      ai.options.length = 0

      for (i=0;i<atmp.length;i++) {

        var opt = atmp[i].split("~");

        ai.options[i] = new Option(opt[0],opt[1]);

      }

    }

 

    function frmSubmit() {

      var si = document.getElementById("selectedItems");

      for (i=0;i<si.options.length;i++) {

        si.options[i].selected = true;

      }

      document.form1.submit();

    }

function onLoadWin() {

 var ai = document.getElementById("availableItems");

      var src = [{label:"test1", value:"1"}, {label:"test2", value:"2"}, {label:"test3", value:"3"}, {label:"test4", value:"4"}];

      for (i=0;i<src.length;i++) {

        var opt = src[i];

        ai.options[ai.options.length] = new Option(opt.label, opt.value);        

      }

      sortAvailable();

}

    </script> 

HTML

<form name="form1" id="form1" method="post" action=""> 

<div style="width:25%;float:left;">&nbsp;</div> 

<div style="width:130px;float:left;"> 

<select size="10" multiple name="availableItems" id="availableItems" style="width:120px;"> 

  <!--

    <option value="0">Apples</option> 

  

    <option value="1">Oranges</option> 

  

    <option value="2">Grapes</option> 

  

    <option value="3">Berries</option> 

  

    <option value="4">Kiwis</option> 

  -->

</select> 

</div> 

<div style="width:100px;float:left;"> 

  <input type="button" class="btn" value="Add" onclick="addItems();" /> 

  <input type="button" class="btn" value="Add All" onclick="addAll();" /> 

  <input type="button" class="btn" value="Remove" onclick="removeItems();" /> 

  <input type="button" class="btn" value="Remove All" onclick="removeAll();" /> 

  <input type="button" class="btn" value="Move Up" onclick="moveUp();" /> 

  <input type="button" class="btn" value="Move Down" onclick="moveDown();" /> 

  <input type="button" class="btn" value="Submit" onclick="frmSubmit();" /> 

</div> 

<div style="width:130px;float:left"> 

<select size="10" multiple="multiple" name="selectedItems" id="selectedItems" style="width:120px;"> 

</select> 

</div> 

</form>