Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts

    moving options from one select to another

    Hi,

    i did a few searches (browsed through about 1000 results), but i couldn't find it. I am sure it was posted sometime ago.

    I need the code to move options from one select to another, with 4 buttons inbetween them, move all, move selected, remove all, remove selected. On top of that, i need code to change the order in the second selectbox, also 4 buttons, move one up, move to top, move one down, move to bottom. Does anyone have (a link to) such code? I dont have the time to code it myself right now

    Please?

    Roelf
    I am the luckiest man in the world

  • #2
    New Coder
    Join Date
    Jan 2003
    Posts
    79
    Thanks
    0
    Thanked 0 Times in 0 Posts
    indeed i have. spent ages coding this for something i was working on:

    Code:
    function addoption()
    {
     var sel=document.form1.allitems.options.selectedIndex
     if(document.form1.allitems.options[sel].value!="END_OF_LIST")
     {
      for(x=0 ; x<no ; x++)
      {
       if(document.form1.selecteditems.options[x]==null)
       {
        document.form1.selecteditems.options[x]=new Option(document.form1.allitems.options[sel].text, document.form1.allitems.options[sel].value)
        for(y=sel ; y<no-no_of_adds ; y++)
        {
         if(document.form1.allitems.options[y+1]!=null)
         {
          document.form1.allitems.options[y].text=document.form1.allitems.options[y+1].text
          document.form1.allitems.options[y].value=document.form1.allitems.options[y+1].value
         }
         else
         {
          document.form1.allitems.options[y]=null
         }
        }
        no_of_adds++
        no_of_rems--
        document.form1.allitems.options[no-no_of_adds]=null
        x=no 
       }
      }
     }
     document.form1.selecteditems.options.selectedIndex=0;
    }
    
    function removeoption()
    {
     var sel=document.form1.selecteditems.options.selectedIndex
     for(x=0 ; x<no+1 ; x++)
      {
       if(document.form1.allitems.options[x]==null)
       {
        document.form1.allitems.options[x]=new Option(document.form1.selecteditems.options[sel].text, document.form1.selecteditems.options[sel].value)
        for(y=sel ; y<no-no_of_rems+1 ; y++)
        {
         if(document.form1.selecteditems.options[y+1]!=null)
         {
          document.form1.selecteditems.options[y].text=document.form1.selecteditems.options[y+1].text
          document.form1.selecteditems.options[y].value=document.form1.selecteditems.options[y+1].text
         }
         else
         {
          document.form1.selecteditems.options[y]=null
         }
        }
        no_of_adds--
        no_of_rems++
        document.form1.selecteditems.options[no-no_of_rems+1]=null
        x=no+1 
       }
      }
    }
    This framework adds (shifts ->) from a seclect called "allitems" or removes (shifts <-) from a list calles "selecteditems" You're onyour own for the up/down functions. The only thing this script requires is an option in each list called "END_OF_LIST" and the vars no_of_adds set to the number of items in allitems (?) and no_of_rems set to the number of items in selecteditems (? these might be backwards)

    gd luck
    <?XML version="1.0" standalone="Yes" encoding="utf-8"?>
    <SIGNITURE>
    XML is the future - embrace it
    </SIGNITURE>

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts
    Hi,

    ended up coding ti myself, Qforms was too large for my needs, the solution optimism provided, didn't work for me either, here is what i came up with:

    Code:
    function selectselected (fromSelObj, toSelObj) {
      var fromlength = fromSelObj.options.length;
      var tolength = toSelObj.options.length;
      for (var i = 0; i < fromlength; i++) {
        if (fromSelObj.options[i].selected) {
          // check if it doesn't already exists in the target
          var exists = false;
          for (var j = 0; j < tolength; j++) {
            if (toSelObj.options[j].value == fromSelObj.options[i].value) {
              exists = true;
            }
          }
          if (!exists) {
            var newOption = new Option(fromSelObj.options[i].text, fromSelObj.options[i].value);
            toSelObj.options.add(newOption, toSelObj.options.selectedIndex);
          }
        }
      }
    }
    
    function removeselected (selObj) {
      var tolength = selObj.options.length;
      for (var i = 0; i < tolength; i++) {
        if (selObj.options[i].selected) {
          selObj.remove(i);
        }
      }
    }
    
    function selectall (fromSelObj, toSelObj) {
      toSelObj.options.length = 0;
      fromlength = fromSelObj.options.length;
      for (var i = 0; i < fromlength; i++) {
        toSelObj.options[toSelObj.options.length] = new Option(fromSelObj.options[i].text, fromSelObj.options[i].value) ;
      }
    }
    
    function removeall (selObj) {
      selObj.options.length = 0;
    }
    the next thig i have to do is code the functions to change the order in the second select.

    Note: what seemed a bit strange to me is the fact that the following code did not work:
    toSelObj.add(fromSelObj.options[i])

    the code: fromSelObj.options[i] doesn't give me an Option-object, i had to use the constructor, to create a new object and then i could add it to the select.

    Nevertheless, thanks for the reply's
    I am the luckiest man in the world

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts
    and here is the code i managed to produce to take care of the moving of the options:
    Code:
    function move(selObj, direction) {
      var newindex = 0;
      var index = selObj.options.selectedIndex;
      if (index > -1) {
        var optiontomove = new Option(selObj.options[index].text, selObj.options[index].value);
        selObj.remove(index);
        (direction == "up")? (newindex = index - 1):(newindex);
        (direction == "down")? (newindex = index + 1):(newindex);
        (direction == "top")? (newindex = 0):(newindex);
        (direction == "bottom")? (newindex = selObj.options.length):(newindex);
        selObj.add(optiontomove, newindex);
        selObj.options[newindex].selected = true;
      }
    }
    for those who are interested
    I am the luckiest man in the world

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    why not just swap the values instead of removing/adding them.

    Code:
    function move(selObj, direction) {
      var newindex = 0;
      var index = selObj.options.selectedIndex;
      if (index > -1) {
        switch(direction){
    		case "up":
    		   newindex = (index>0)?index-1:0;break;
    		case "down":
    		   newindex = (index<(selObj.options.length-1))?(index+1):index;break;
    		case "top":
    		   newindex = 0;break;
    		case "down":
    		   newindex = selObj.options.length-1;break;
        }	
        var tempVal = selObj.options[newindex].value;
        var tempTxt = selObj.options[newindex].text;
        selObj.options[newindex].text = selObj.options[index].text
        selObj.options[newindex].value = selObj.options[index].value;
        selObj.options[index].text = tempTxt;
        selObj.options[index].value = tempVal;
    	selObj.options[index].selected = false;
        selObj.options[newindex].selected = true;
      }
    }
    i also added checking if you want to move the first item up and move the last item down.
    I also un-select the item in the previous position aside from selecting the item in the new position. I assume you are using a multiple select field. you need to unselect the previous item because it will still be selected "internally" even if it is not highlighted since it is a multiple select.


  •  

    Posting Permissions

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