By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,680 Members | 1,578 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,680 IT Pros & Developers. It's quick & easy.

Select List transfer to another List

P: n/a

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,

Feb 16 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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/
Feb 16 '06 #2

P: n/a


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
Feb 16 '06 #3

P: n/a

Thans bud. Exactly what I was looking for.

Feb 16 '06 #4

P: n/a
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
Feb 17 '06 #5

P: n/a
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
Feb 17 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.