Select List transfer to another List

Discussion in 'Javascript' started by carrajo, Feb 16, 2006.

  1. carrajo

    carrajo Guest

    Hey,

    I'm trying to duplicate the following:

    Select List 1
    ---
    Apple
    Orange
    Banana

    Select List 2 ( blank )
    -------

    I would like to have 2 buttons in between.
    - Button 1 will transfer the selected value from List 1 to List 2
    - Button 2 will transfer the selected value from List 2 to List 1

    Both lists need to update. I've seen this on many sites, can anyone
    help me
    find a snippet on how to do this??

    Thanks,
     
    carrajo, Feb 16, 2006
    #1
    1. Advertising

  2. carrajo wrote:

    > Hey,
    >
    > I'm trying to duplicate the following:
    > Select List 1
    > ---
    > Apple
    > Orange
    > Banana
    > Select List 2 ( blank )
    > -------
    > I would like to have 2 buttons in between.
    > - Button 1 will transfer the selected value from List 1 to List 2
    > - Button 2 will transfer the selected value from List 2 to List 1
    > Both lists need to update. I've seen this on many sites, can anyone
    > help me
    > find a snippet on how to do this??
    > Thanks,


    http://www.mattkruse.com/javascript/optiontransfer/
     
    Mike Scirocco, Feb 16, 2006
    #2
    1. Advertising

  3. carrajo

    Danny Guest

    Simple, just populate using the Option() constructor, this is an old
    example I made a while back:

    <html>
    <head>

    <script language="javascript">

    function getOpt(select1,select2)
    {
    for (bCnt=0;bCnt<select1.length;bCnt++)
    {
    if (select1.options[bCnt].selected)
    {
    newOpt=new
    Option(select1.options[bCnt].text,select1.options[bCnt].value,false,false);
    select2.options[select2.length]=newOpt;
    }
    }

    }

    function remOpt(select2)
    {
    for (bCnt=0;bCnt<select2.length;bCnt++)
    {
    if (select2.options[bCnt].selected)
    select2.options[bCnt]=null;
    }

    }


    </script>

    </head>

    <body>

    <form>

    <select name="oneS" multiple size="5">

    <option value="http://www.hitsquad.com/smm/">Hitsquad Music
    Machine, Shareware Archive (Windows, Linux, BeOS, MacOS, OS/2, MSDOS,
    Atari)</option>
    <option
    value="http://www.sharewareplace.com/search.html">Shareware Place
    Archive (Windows, MacOS)</option>
    <option
    value="http://www.scripps.edu/~mjhunter/shareware.html">Mike's
    Shareware sites (Mac and PC)</option>
    <option value="http://ded.com/nonags/">No Nags ( Win3.x, Win95,
    WinNT )</option>
    <option value="http://www.os2bbs.com/">Norloff's OS/2 Shareware
    BBS ( OS/2 )</option>
    <option value="http://tigger.stcloud.msus.edu/~hoffad01">One
    Stop Software Shoppe ( Win3.x, Win95/98 )</option>
    <option
    value="http://godzilla.eecs.berkeley.edu/os2/software/shareware/shareware.html">OS/2
    Freeware and Shareware ( OS/2 )</option>
    <option value="http://www.pacinfo.com/archive/">PacInfo Software
    Archive ( Win3.x, Mac )</option>
    <option value="http://papa.indstate.edu:8888/">Papa Winsock L (
    Winsock, Win3.x, Win95/98 )</option>
    <option value="http://www.pcmag.com/download/dl-home.htm">PC
    Magazine's Downloadable Files Area ( Win3.x, Win95/98, WinNT
    )</option>
    <option
    value="http://www.bae.ncsu.edu/bae/people/faculty/walker/hotlist/pcutil.html">PC
    Utilities ( Win3.x, Win95/98, MS-Dos )</option>
    <option value="http://www.pcwin.com/software.html">PC Win
    Resource Center ( Win95/98 )</option>
    <option
    value="http://users.aol.com/ericb98398/index.html">Personal
    Microcosm's Shareware ( Win3.x, Win95/98, WinNT )</option>
    <option value="http://www.schaft.com/ftpfiles.html">Schaft's
    Windows Shareware Archive ( Winsock, Win3.x, Win95/98 )</option>
    <option value="http://www.taynet.com/saver/">Screen Saver Central
    ( Win3.x, Win95/98 )</option>
    <option value="http://www.sirius.com/~ratloaf/">Screen Savers for
    Windows from A to Z ( Win3.x, Win95/98, Mac )</option>
    <option value="http://www.sharewarejunkies.com">Shareware
    Junkies ( Win3.x, Win95/98, MS-Dos, Mac, OS/2 )</option>
    <option
    value="http://www.geocities.com/Hollywood/7956/index.html">Simpson's
    Software Home Page ( Win3.x, Win95/98, MS-Dos, Mac )</option>
    <option value="http://www.coast.net/SimTel/">SimTel Software
    Repository ( Win3.x, Win95/98, WinNT, MS-Dos, OS/2 )</option>

    </select>
    <br>

    <input type="button" value="Add"
    onClick="getOpt(this.form.oneS,this.form.twoS)">
    <br>

    <input type="button" value="Remove"
    onClick="remOpt(this.form.twoS)">
    <br>

    <select name="twoS" multiple size="5">

    </select>
    </form>

    </body>
    </html>

    Danny
     
    Danny, Feb 16, 2006
    #3
  4. carrajo

    carrajo Guest

    Thans bud. Exactly what I was looking for.
     
    carrajo, Feb 16, 2006
    #4
  5. carrajo

    RobG Guest

    Danny wrote:
    >
    > Simple, just populate using the Option() constructor, this is an old
    > example I made a while back:


    You should perhaps have updated it:

    > <html>
    > <head>
    >
    > <script language="javascript">


    The language attribute is deprecated, type is required.

    >
    > function getOpt(select1,select2)
    > {
    > for (bCnt=0;bCnt<select1.length;bCnt++)


    Don't use global variables unless needed, particularly ones used as
    counters.


    > {
    > if (select1.options[bCnt].selected)
    > {
    > newOpt=new
    > Option(select1.options[bCnt].text,select1.options[bCnt].value,false,false);
    > select2.options[select2.length]=newOpt;


    This is a poor attempt to clone an existing option. The HTMLElement
    cloneNode() method would be far better, but you can simply move the
    option from one select to the other.

    The 'remOpt() is therefore redundant (it also unnecessarily replicates
    logic from this function).

    [...]


    Here's an alternative that is significantly more efficient:

    function moveSelectedOpts(fromSel, toSel)
    {
    var opt, opts = fromSel.options;
    for (var i=0; i<opts.length; ++i) {
    opt = opts;
    if (opt.selected) {
    toSel.appendChild(opt);
    }
    }
    }

    Normally I'd have used a variable to store the value of opts.length, but
    since it changes as options are moved across to the other select, it is
    kept 'live'.

    The function can be called with:

    <input type="button" value="Add"
    onclick="moveSelectedOpts(this.form.oneS, this.form.twoS)">




    --
    Rob
     
    RobG, Feb 17, 2006
    #5
  6. carrajo

    RobG Guest

    RobG wrote:
    [...]
    >
    > Here's an alternative that is significantly more efficient:


    Ooops, insufficient testing, here's a fixed version:

    >
    > function moveSelectedOpts(fromSel, toSel)
    > {
    > var opt, opts = fromSel.options;
    > for (var i=0; i<opts.length; ++i) {
    > opt = opts;
    > if (opt.selected) {
    > toSel.appendChild(opt);


    i -= 1;

    > }
    > }
    > }


    In the original, if consecutive options are selected, every second one
    is skipped unless the counter is re-set. My bad. Here's another verison:

    function moveSelectedOpt(fromSel, toSel)
    {
    var opts = fromSel.options;
    for (var i=0; i<opts.length; ++i) {
    opts.selected && toSel.appendChild(opts) && (i-=1);
    }
    }


    --
    Rob
     
    RobG, Feb 17, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. J. Hall
    Replies:
    2
    Views:
    1,081
    Jeff Thies
    Apr 21, 2004
  2. Jim
    Replies:
    1
    Views:
    920
    Aaron Bertrand - MVP
    Jan 28, 2004
  3. palmiere
    Replies:
    1
    Views:
    418
    Erwin Moller
    Feb 9, 2004
  4. WebRaster
    Replies:
    1
    Views:
    272
    Francisco Spaeth
    Oct 26, 2005
  5. richardsith
    Replies:
    0
    Views:
    1,494
    richardsith
    Apr 20, 2012
Loading...

Share This Page