SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast Varchar's Avatar
    Join Date
    Sep 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need Menu Swapper with arrangement function

    Hello,

    Can someone please help me? I am looking for a menu swapper like this one:

    http://www.mredkj.com/tutorials/tutorial_mixed2b.html

    but with the functionality to rearrange the items on the right hand side up and down like this one:

    http://javascript.internet.com/forms...ion-order.html

    I wasn't able to local a combo like these. Please let me know if anyone have it seen it. Thanks.

    Kindly Regards,

    Kawing

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick stab at combining those two scripts - but it still needs some work.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>demo</title>
    <script type='text/javascript'>
    function move(index, to)
    {
      var sel = document.forms['form1'].sel2;
      var op = sel.options;
      var tgt = index + to;
      if (tgt < 0 || tgt >= op.length) return false;
      var i, v, items = [], values = [];
      i = op[tgt].text;
      v = op[tgt].value;
      op[tgt].text =  op[index].text;
      op[tgt].value = op[index].value;
      op[index].text = i;
      op[index].value = v;
      op.selectedIndex += to;
    }
    // The following is from http://www.mredkj.com/tutorials/tutorial_mixed2b.html
    function addOption(theSel, theText, theValue)
    {
      var newOpt = new Option(theText, theValue);
      var selLength = theSel.length;
      theSel.options[selLength] = newOpt;
    }
    
    function deleteOption(theSel, theIndex)
    { 
      var selLength = theSel.length;
      if(selLength>0)
      {
        theSel.options[theIndex] = null;
      }
    }
    
    function moveOptions(theSelFrom, theSelTo)
    {
      
      var selLength = theSelFrom.length;
      var selectedText = new Array();
      var selectedValues = new Array();
      var selectedCount = 0;
      
      var i;
      
      // Find the selected Options in reverse order
      // and delete them from the 'from' Select.
      for(i=selLength-1; i>=0; i--)
      {
        if(theSelFrom.options[i].selected)
        {
          selectedText[selectedCount] = theSelFrom.options[i].text;
          selectedValues[selectedCount] = theSelFrom.options[i].value;
          deleteOption(theSelFrom, i);
          selectedCount++;
        }
      }
      
      // Add the selected text/values in reverse order.
      // This will add the Options to the 'to' Select
      // in the same order as they were in the 'from' Select.
      for(i=selectedCount-1; i>=0; i--)
      {
        addOption(theSelTo, selectedText[i], selectedValues[i]);
      }
    }
    </script>
    </head>
    <body>
    
    <form name='form1' action="yourpage.asp" method="post">
    <table>
      <tr>
        <td>
          <select name="sel1" size="10" multiple="multiple">
          <option value="1">Left1</option>
          <option value="2">Left2</option>
          <option value="3">Left3</option>
          <option value="4">Left4</option>
          <option value="5">Left5</option>
          </select>
        </td>
        <td align="center" valign="middle">
          <p><input type="button" value="--&gt;" onclick="moveOptions(this.form.sel1, this.form.sel2)"></p>
          <p><input type="button" value="&lt;--" onclick="moveOptions(this.form.sel2, this.form.sel1)"></p>
        </td>
        <td>
          <select name="sel2" size="10" multiple="multiple">
          <option value="1">Right1</option>
          <option value="2">Right2</option>
          <option value="3">Right3</option>
          <option value="4">Right4</option>
          <option value="5">Right5</option>
          </select>
        </td>
        <td align="center" valign="middle">
          <p><input type="button" value="Up" onclick="move(this.form.sel2.selectedIndex,-1)"></p>
          <p><input type="button" value="Dn" onclick="move(this.form.sel2.selectedIndex,1)"></p>
        </td>
      </tr>
    </table>
    </form>
    
    </body>
    </html>
    Last edited by MikeFoster; Jan 9, 2007 at 03:29. Reason: Rewrote the 'move' function


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
  •