Move selection list items from left to right using javascript

JavaScript
1

Hi guys I am fairly new to Javascript though have been playing around with Javascript for a while now. I am stuck on where to start with the Javascript in the code below. I want to move selected items over to the other box but just don’t know where to start. Please help me!

Where am I going wrong?

My code is as follows:

<script type="text/javascript">

/* <![CDATA[ */
	
	function moveItem(namesLeft, namesRight) {	
		
		var moveLeft = new Array(5);
		
		moveLeft[0] = "Charles";
		moveLeft[1] = "Craig";
		moveLeft[2] = "Lillian";
		moveLeft[3] = "Brent";
		moveLeft[4] = "Chris";
		
		var moveRight = new Array(5);
		
		moveRight[0] = "Angela";
		moveRight[1] = "Karen";
		moveRight[2] = "Patricia";
		moveRight[3] = "Johnathan";
		moveRight[4] = "Tania";

	  if ( moveLeft == -1) {
		
		  for(var i = 0; i < moveLeft.length; i++);
		
	  } else {
		
		  moveItem == -1;

                 // not sure what to do here if my code makes any sense!
		
	  }
	

        }
        	
/* ]]> */

</script>

<div id="container">

<form action="" method="post" name="moveList">

<table width="450" border="0">
  <tr>
    <td align="center">
    <select name="namesLeft" size="6" multiple="multiple" id="namesLeft">

    <option value="charles">Charles</option>
    <option value="craig">Craig</option>
    <option value="lillian" >Lillian</option>
    <option value="brent" >Brent</option>
    <option value="chris">Chris</option>

    </select></td>

    <td width="100" align="center" ><input name="" onclick="moveItem(namesRight);" type="button" value="<<" />
    <input name="" onclick="moveItem(namesLeft);" type="button" value=">>" /></td>

    <td align="center">

    <select name="namesRight" size="6" multiple="multiple" id="namesRight">

    <option value="angela">Angela</option>
    <option value="karen">Karen</option>
    <option value="patricia">Patricia</option>
    <option value="johnathan" >Johnathan</option>
    <option value="tania" >Tania</option>

    </select></td>
  </tr>
</table>

</form>

</div>
2 
<td width="100" align="center" ><input name="" onclick="moveItem('namesLeft','namesRight');" type="button" value=">>" />
    <input name="" onclick="moveItem('namesRight', 'namesLeft');" type="button" value="<<" /></td>

function moveItem( a, b )
{
  var fromBox = document.getElementById( a ),
      toBox = document.getElementById( b );

  for( var i = 0, opts = fromBox.options; opts[ i ]; i++ )
  {
    if( opts[ i ].selected )
    {
      toBox.value = opts[i].value;

      if( toBox.selectedIndex == -1 || ( opts[ i ].text != toBox.options[ toBox.selectedIndex ].text ) )
      {
        toBox.options.add( new Option( opts[i].text, opts[i].value ) );
        opts.remove( i );
        i--;
      }
    }
  }
}
</script>
3

Hi Ali thanks for the help. :slight_smile: