Dual List Box Source Code

See a working example of this code Back to Tutorials

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Double List Box</title>
  <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(); }
  </script>

  <style type="text/css">
    .btn {width:90px;}
  </style>
</head>
<body onload="sortAvailable();">
<%
if request.Form("SelectedItems") > "" then
  response.Write("You chose option(s): " & request.Form("selectedItems"))
end if
initialItems = Array("Apples","Oranges","Grapes","Berries","Kiwis")
%>
<form name="form1" id="form1" method="post" >
<div style="width:130px;float:left;">
<select size="10" multiple name="availableItems" id="availableItems" style="width:120px;">
<% for i = 0 to ubound(initialItems) %>
  <option value="<%=i%>"i><%=initialItems(i) %></option>
<% next %>
</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>
</body>
</html>