Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Select List transfer to another List

Reply
Thread Tools

Select List transfer to another List

 
 
carrajo
Guest
Posts: n/a
 
      02-16-2006

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,

 
Reply With Quote
 
 
 
 
Mike Scirocco
Guest
Posts: n/a
 
      02-16-2006
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/
 
Reply With Quote
 
 
 
 
Danny
Guest
Posts: n/a
 
      02-16-2006


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
 
Reply With Quote
 
carrajo
Guest
Posts: n/a
 
      02-16-2006

Thans bud. Exactly what I was looking for.

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      02-17-2006
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[i];
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
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      02-17-2006
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[i];
> 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[i].selected && toSel.appendChild(opts[i]) && (i-=1);
}
}


--
Rob
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Select List transfer to another List with array richardsith Javascript 0 04-20-2012 09:10 PM
to select random number from select list Pranjal Jain Ruby 3 04-10-2008 04:01 PM
modify the default option in a select changing another select WebRaster Javascript 1 10-26-2005 10:36 AM
Selection from One SELECT changes selected option of another SELECT? J. Hall HTML 2 04-21-2004 05:36 PM
select of select box will select multiple in another box palmiere Javascript 1 02-09-2004 01:11 PM



Advertisments