SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Location
    Cape Town
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Move selection list items from left to right using javascript

    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:

    Code:
    <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>
    HTML Code:
    <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. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <td width="100" align="center" ><input name="" onclick="moveItem('namesLeft','namesRight');" type="button" value=">>" />
        <input name="" onclick="moveItem('namesRight', 'namesLeft');" type="button" value="<<" /></td>
    Code:
    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>
    Last edited by Logic Ali; Mar 11, 2013 at 17:38. Reason: Enhancement
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Location
    Cape Town
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ali thanks for the help.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •