Select List transfer to another List

C

carrajo

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,
 
M

Mike Scirocco

carrajo said:
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,
Click to expand...

http://www.mattkruse.com/javascript/optiontransfer/
 
D

Danny

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
 
R

RobG

Danny said:
Simple, just populate using the Option() constructor, this is an old
example I made a while back:
Click to expand...

You should perhaps have updated it:
<html>
<head>

<script language="javascript">
Click to expand...

The language attribute is deprecated, type is required.
function getOpt(select1,select2)
{
for (bCnt=0;bCnt<select1.length;bCnt++)
Click to expand...

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;
Click to expand...

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)">
 
R

RobG

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

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);
Click to expand...


i -= 1;
}
}
}
Click to expand...

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);
}
}
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Bypassing Sweeper Bot: Transferring BSC to Cover Fees for Teddy Doge Token Transfer 0
Select List transfer to another List with array 0
Select Eof extension files based on text list of filenames with if condition 0
Select files based on text list of filenames(part of the name:date) with condition 0
How to make a div select work? 5
How to fetch database row and display in Qlabels with QcomboBox selected value in PyQt5 8
Add Image and label dynamically inside the dropdown 2
How to code a site to give information about responses to questions? 8

Members online

Total: 26 (members: 2, guests: 24)
Robots: 665

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top