Move and Change order from multiple pairs (multiselect to single select)

Move and Change order from multiple pairs (multiselect to single select). I think I originally got from: http://www.mredkj.com/tutorials/tutorial_mixed2b.html

by Donavon Lerman

HTML

<form method="post" name="myForm" id="myForm" action="test-selectMultiple.epl" >
  
    <table align="center" border="1">
      <tr>
        <td>
          <table align="center" border="1">
      
            <tr>
              <td valign="top" align="center">
                <b>Select From</b><br />
                <select size="5" multiple="multiple" id="list_from1" style="width:175px;">
                  <optgroup label="Group 2">
                    <option value="group2-option2">Group 2 / Option 2</option>
                    <option value="group2-option3">Group 2 / Option 3</option>
                  </optgroup>
                  <optgroup label="Group 1">
                    <option value="group1-option1">Group 1 / Option 1</option>
                  </optgroup>
                  
                  <optgroup label="Group 3">
                    <option value="group3-option1">Group 3 / Option 1</option>
                    <option value="group3-option2">Group 3 / Option 2</option>
                    <option value="group3-option3">Group 3 / Option 3</option>
                    <option value="group3-option4">Group 3 / Option 4</option>
                  </optgroup>

                </select>
              </td>
              
              <td align="center" valign="middle">
              
                <input  type    = "button" 
                        value   = "&#x2192;"
                        alt     = "Move to Selected List"
                        title   = "Move to Selected List"
                        onclick = "moveOptions( document.getElementById('optionName1'), // obj1, obj2, listFrom, listTo, SelFrom, SelTo
                                                document.getElementById('optionValue1'),
                                                'list_from1',  
                                                'list_to1',  
                                                'list_from1',  
                                                'list_to1' ...

JavaScript

function addOption(theSel, theText, theValue) {
  var newOpt                = new Option(theText, theValue);
  var selLength             = theSel.length;
  theSel.options[selLength] = newOpt;
}

function moveUpDown(obj1, obj2, list, to) {
  var index = list.selectedIndex;
  var total = list.options.length-1;
  
  if (index == -1) return false;
  if (to == +1 && index == total) return false;
  if (to == -1 && index == 0) return false;
  
  var items          = new Array;
  var values         = new Array;
  
  for (i             = total; i >= 0; i--) {
    items[i]         = list.options[i].text;
    values[i]        = list.options[i].value;
  }
  
  var tempFromItem   = items[index];
  var tempFromValue  = values[index];
  
  var tempToItem     = items[index + to];
  var tempToValue    = values[index + to];
  
  items[index]       = tempToItem;
  values[index]      = tempToValue;
  
  items[index + to]  = tempFromItem;
  values[index + to] = tempFromValue;

  
  for (i = total; i >= 0; i--) {
    if (i == index + to) {
      list.options[i] = new Option(items[i], values[i],0 ,1);
    } else {
      list.options[i] = new Option(items[i], values[i]);
    }
  }
  
  var stroptions = "";
  var stroptionsvalue = "";
  
  for (i = 0; i <= total; i++) {
    if (i!=0) stroptions += ",";
    stroptions += list.options[i].text;

    if (i!=0) stroptionsvalue += ",";
    stroptionsvalue += list.options[i].value;
  }         
  
  obj1.value = stroptions;
  obj2.value = stroptionsvalue;
  
  list.focus();
}

function deleteOption(theSel, theIndex) {
  var selLength = theSel.length;
  
  if(selLength>0) {
    theSel.options[theIndex] = null;
  }
}

function moveOptions(obj1, obj2, ListFrom, ListTo, SelFrom, SelTo) {

  var theListFrom = document.getElementById(ListFrom);
  var theListTo   = document.getElementById(ListTo);

  var theSelFrom  = document.getElementById(SelFrom);
  var theSelTo    = document.getElementById(SelTo);
  
  var selLength      = theSelFrom.length;
 ...