...

View Full Version : Toggling Values Between <select> boxes...



bubbisthedog
01-23-2006, 02:45 PM
Hello, all. If you open the following code (written primarily by a generous member of this forum [I think it was this one?] :) ) in your browser, you'll notice that there are two select boxes in which you can toggle values back and forth. It works perfectly except for being able to select multiple values from the second box and return them to the first. Any idea on what's causing this?



<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Maintain Relationships</title>

<link rel="StyleSheet" href="stormy.css" media="screen" type="text/css" />
</head>

<body class="text8">

<script language="javascript">
<!--
function SendToAndRemove()
{
var Sel1=document.Relationships.selectName1;
var Sel2=document.Relationships.selectName2;
var len1=Sel1.length;
var len2=Sel2.length;

for(i=0; i<Sel1.length; i++)
{
found=false;
if(Sel1.options[i].selected)
{
for(j=0; j<Sel2.length; j++)
{
if(Sel2.options[j].value == Sel1.options[i].value)
{
found=true;
}
}
if(found == false)
{
Sel2.options[Sel2.length]=new
Option(Sel1.options[i].value, Sel1.options[i].text);
}
Sel1.options[i]=null;
len1--;
i--;
}
}
}

function SendBack()
{
var Sel1=document.Relationships.selectName1;
var Sel2=document.Relationships.selectName2;
var len2=Sel2.length;
var len1=Sel1.length;

for(i=0; i<Sel2.length; i++)
{
found=false;
if(Sel2.options[i].selected)
{
for(j=0; j<Sel1.length; j++)
{
if(Sel1.options[j].value == Sel1.options[i].value)
{
found=true;
}
}
if(found == false)
{
Sel1.options[Sel1.length]=new
Option(Sel2.options[i].value, Sel2.options[i].text);
}
Sel2.options[i]=null;
len2--;
i--;
}
}
}
//-->
</script>

<center>
<form id="Relationships" name="Relationships" method="post">
<div style="border:solid gray 0px; width:700px">
<div style="float:left; border:solid yellow 0px; text-align:left; margin:0px 15px 0px 0px; padding:10px; background:rgb(230, 230, 240)">
</div>
<div style="float:left">
<div style="float:left; border:solid red 0px">
<select id="selectName1" name="selectName1" multiple size="10" style="width:300px">
<option id="" value="carr1">carr1</option>
<option id="" value="carr2">carr2</option>
<option id="" value="carr3">carr3</option>
</select>
</div>
<div style="float:left">
</div>
<div style="clear:both; margin:5px 0px 10px 0px; text-align:left">
<input type="button" class="text8" value="Add Selection(s) as Relationship(s)" onClick="SendToAndRemove();">
</div>
<div style="clear:both; float:left; border:solid green 0px">
<div style="margin:10px 0px 0px 0px; text-align:left">

</div>
<div style="text-align:left">
<select id="selectName2" name="selectName2" multiple size="5" style="width:300px">
</select>
</div>
</div>
<div style="float:left; margin:30px 0px 0px 0px; text-align:left">
<input type="button" class="text8" value="Remove" onClick="SendBack();"><br />
</div>
</div>
</div>
</form>
</center>
</body>

</html>


Thank you very much for any assistance.

bubbis

vwphillips
01-23-2006, 03:04 PM
see this script

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f15

bubbisthedog
01-23-2006, 03:24 PM
vw,

I really appreciate the code, but it does not do a couple of things that I seek to accomplish (referring to boxes 2 and 3 from the link that you've provided):

1) The code allows for one value to appear multiple times in either box and
2) Box 2 does not remove a value when sent to box 3.

I understand that box 2 was not supposed to remove values, but, respectfully, I already know how to do that. I'm surprised that my code (once again, I had a lot of help from another coder) does not work, seeing that the first function works properly, and the second function is for all intensive purposes the exact same thing.

Thanks again, vw, for taking the time to assist me.

bubbis

vwphillips
01-23-2006, 05:18 PM
1) The code allows for one value to appear multiple times in either box and
2) Box 2 does not remove a value when sent to box 3.


1) this may need an additional option

2) this option has not been selected for selectlist 2 (see application notes)

may look to implement 1) if important

vwphillips
01-23-2006, 05:39 PM
I presume that if the option to be added duplicates an existing option you do not want the option removed from the source selectList

please confirm

anyway if so replace function f15_Add() with


function f15_Add(){
for (zxc0=f15_FirstMove;zxc0<f15_Source.options.length;zxc0++){
if (f15_Source.options[zxc0].selected){
var zxcadd=true;
for (zxc0A=0;zxc0A<f15_Target.options.length;zxc0A++){
if (f15_Target.options[zxc0A].text==f15_Source.options[zxc0].text){
f15_Source.options[zxc0].selected=false;
zxcadd=false;
}
}
if (zxcadd){
f15_Target.opts[f15_Target.opts.length]=f15_Source.options[zxc0];
}
}
}
if (f15_Target.sort=='Sort'){
f15_Sort(f15_Target.opts);
}
f15_Target.options.length=0;
f15_Target.strg='';
for (f15_1=0;f15_1<f15_Target.opts.length;f15_1++){
f15_Target.options[f15_1]=new Option(f15_Target.opts[f15_1].text,f15_Target.opts[f15_1].value,true,true);
f15_Target.strg+=f15_Target.opts[f15_1].text+'^'+f15_Target.opts[f15_1].value+',';
}
f15_Target.selectedIndex=-1;
f15_Target.htb.value=f15_Target.strg
}

bubbisthedog
01-23-2006, 05:42 PM
I'll try altering the code to which you referred me to accomplish my task.

Thanks again for taking the time to help me,

bubbis

bubbisthedog
01-23-2006, 05:46 PM
I presume that if the option to be added duplicates an existing option you do not want the option removed from the source selectList

please confirm

Confirmed. There are two scenarios:

1) Take an item (or items) from list 1, transfer it (them) to list 2. In this case, the item(s) from list 1 would be removed, and added to list 2.

2) Vice Versa... Take an item (or items) from list 2, transfer it (them) to list 1. In this case, the item(s) from list 2 would be removed, and added to list 1.

Thank you,

bubbis

EDIT: The code that I provided at the beginning of this thread accomplishes "1)" above. I can even move one item from list 2 back to list 1. It's only when I try to move multiple items from list 2 to list 1 things do not work properly.

vwphillips
01-23-2006, 05:51 PM
reolace function f15_Add() with


function f15_Add(){
for (zxc0=f15_FirstMove;zxc0<f15_Source.options.length;zxc0++){
if (f15_Source.options[zxc0].selected){
var zxcadd=true;
for (zxc0A=0;zxc0A<f15_Target.options.length;zxc0A++){
if (f15_Target.options[zxc0A].text==f15_Source.options[zxc0].text){
f15_Source.options[zxc0].selected=false;
zxcadd=false;
}
}
if (zxcadd){
f15_Target.opts[f15_Target.opts.length]=f15_Source.options[zxc0];
}
}
}
if (f15_Target.sort=='Sort'){
f15_Sort(f15_Target.opts);
}
f15_Target.options.length=0;
f15_Target.strg='';
for (f15_1=0;f15_1<f15_Target.opts.length;f15_1++){
f15_Target.options[f15_1]=new Option(f15_Target.opts[f15_1].text,f15_Target.opts[f15_1].value,true,true);
f15_Target.strg+=f15_Target.opts[f15_1].text+'^'+f15_Target.opts[f15_1].value+',';
}
f15_Target.selectedIndex=-1;
f15_Target.htb.value=f15_Target.strg
}

bubbisthedog
01-23-2006, 06:28 PM
Thanks a lot for your help, vw! It's going to take me some time to get the HTML implemented for your functions; I'll post back with the results when I've done all I can.

Thanks again for your generosity, vw.

bubbis



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum