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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Shifting select value to top/bottom position

    I have a script which shifts the postion of a value in a select list Up or Down. It move the position one up or one down. Now I want to add Top and Bottom as well. How can I shift to top or bottom position in one step? I mean that whole list moves up/down at one go and the selected value takes the top/bottom position. The part of my code looks like this....

    <script>
    function SelectMoveOption(the_option){
    if (!the_option)
    return null
    the_option = new Option(the_option.text,the_option.value , false, false)
    return the_option;
    }

    function Selectmove(the_select,the_list,direction){
    for(i=0;i < the_select.options.length;i++){
    if (the_select.options[i].selected){
    if((i == 0)&&(direction == -1))
    return null;
    a = SelectMoveOption(the_select.options[i])
    b = SelectMoveOption(the_select.options[i+direction])

    if ((a != null) && (b != null)){
    the_select.options[i] = b
    a.selected = 1
    the_select.options[i+direction] = a
    i = i + 1
    }
    }
    }
    the_list.value = ''
    for(i=0;i < the_select.options.length;i++){
    the_list.value += the_select.options[i].value
    if (i != the_select.options.length - 1)
    the_list.value += ','
    }
    }
    </script>



    <button onclick="Selectmove(myform.ID,myform.listorder,-1);" >
    UP</button>
    <button onclick="Selectmove(myform.HomeID,myform.listorder,1);">
    Down</button>


    Thanks and your help is much appreciated

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is this what you mean?

    Code:
    <body>
    <script type="text/javascript">
    function shiftOps(sEl, n)
     {
       var indx = sEl.selectedIndex;
       if(indx < 0)
         return false;
       var targ,
           ops = sEl.options,
            ln = sEl.length - 1;
       if(!n || n == ln)
         targ = n;
       else
        {
          var ofs = indx - n;
          if(ofs + 1 && ofs <= ln)
          targ = ofs;
        }
       if(targ >= 0)
        {
          var aNode = ops[indx].cloneNode(true),
              bNode = ops[targ].cloneNode(true);
          sEl.replaceChild(aNode, ops[targ]);
          sEl.replaceChild(bNode, ops[indx]);
          sEl.selectedIndex = targ;
        }
       sEl.focus();
     }
    </script>
    <form style="text-align:center">
    <select name="sel" size="5">
    <option selected>voluptatem</option>
    <option>laudantium</option>
    <option>doloremque</option>
    <option>consectetur</option>
    <option>adipisicing</option>
    </select>
    <br>
    <input type="button" value="Top" onclick="shiftOps(sel, 0)">
    <input type="button" value="Up"  onclick="shiftOps(sel, 1)">
    <input type="button" value="Down"  onclick="shiftOps(sel, -1)">
    <input type="button" value="Bottom" onclick="shiftOps(sel, sel.length - 1)">
    </form>
    </body>

  • #3
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Actually, that swaps all nodes...

    This one moves the options to top or bottom, without switching those node positions:
    Code:
    <body>
    <script type="text/javascript">
    function shiftOps(sEl, command)
     {
       var indx = sEl.selectedIndex;
       if(indx < 0)
         return false;
       var ops = sEl.options,
            ln = sEl.length - 1,
         aNode = ops[indx].cloneNode(true);
       switch(command)
        {
          case "up"     : updn(1);  break;
          case "down"   : updn(-1); break;
          case "top"    : tbot(0);  break;
          case "bottom" : tbot(ln); break;
        }
       function tbot(n)
        {
          var nullNode = document.createTextNode("");
          if(n)
            sEl.appendChild(aNode);
          else
           {
             sEl.insertBefore(aNode, ops[n]);
             indx = indx + 1;
           }
          sEl.replaceChild(nullNode, ops[indx]);
          sEl.selectedIndex = n;
        }
       function updn(n)
        {
          n = indx - n;
          if(n + 1 && n <= ln)
           {
             var bNode = ops[n].cloneNode(true);
             sEl.replaceChild(aNode, ops[n]);
             sEl.replaceChild(bNode, ops[indx]);
             sEl.selectedIndex = n;
           }
        }
       sEl.focus();
     }
    </script>
    <form style="text-align:center">
    <select name="sel" size="5">
    <option selected>voluptatem</option>
    <option>laudantium</option>
    <option>doloremque</option>
    <option>consectetur</option>
    <option>adipisicing</option>
    </select>
    <br>
    <input type="button" value="Top"    onclick="shiftOps(sel, 'top')">
    <input type="button" value="Up"     onclick="shiftOps(sel, 'up')">
    <input type="button" value="Down"   onclick="shiftOps(sel, 'down')">
    <input type="button" value="Bottom" onclick="shiftOps(sel, 'bottom')">
    </form>
    </body>
    Last edited by neofibril; 06-22-2004 at 06:18 PM. Reason: removed an unused var...

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    3rd try...

    I should have used removeChild, instead of replacing w/ a textNode, so:
    Code:
    <body>
    <script type="text/javascript">
    function shiftOps(sEl, command)
     {
       var indx = sEl.selectedIndex;
       if(indx < 0)
         return false;
       var ops = sEl.options,
            ln = sEl.length - 1,
         aNode = ops[indx].cloneNode(true);
       switch(command)
        {
          case "up"     : updn(1);  break;
          case "down"   : updn(-1); break;
          case "top"    : tbot(0);  break;
          case "bottom" : tbot(ln); break;
        }
       function tbot(n)
        {
          if(n)
            sEl.appendChild(aNode);
          else
           {
             sEl.insertBefore(aNode, ops[n]);
             indx = indx + 1;
           }
          sEl.removeChild(ops[indx]);
          sEl.selectedIndex = n;
        }
       function updn(n)
        {
          n = indx - n;
          if(n + 1 && n <= ln)
           {
             var bNode = ops[n].cloneNode(true);
             sEl.replaceChild(aNode, ops[n]);
             sEl.replaceChild(bNode, ops[indx]);
             sEl.selectedIndex = n;
           }
        }
       sEl.focus();
     }
    </script>
    <form style="text-align:center">
    <select name="sel" size="5">
    <option selected>voluptatem</option>
    <option>laudantium</option>
    <option>doloremque</option>
    <option>consectetur</option>
    <option>adipisicing</option>
    </select>
    <br>
    <input type="button" value="Top"    onclick="shiftOps(sel, 'top')">
    <input type="button" value="Up"     onclick="shiftOps(sel, 'up')">
    <input type="button" value="Down"   onclick="shiftOps(sel, 'down')">
    <input type="button" value="Bottom" onclick="shiftOps(sel, 'bottom')">
    </form>
    </body>


  •  

    Posting Permissions

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