Copy items from a listbox 2

[Kendel]

Hi,

I have 2 nulti-select listboxes. Items in List1 are popuped from DB. I want to be able to select an entry, click on a button, then this entry will be removed from List1 and put in List2, vice versa.

Since both List1 & 2 are multi-selected, I would like have option to select 1 entry, multi-entry, and all-entry to move from 1 box to another.

I've seen something like this before but couldn't find it now.

Can you help me out please?

Thanks.

 

[TheCandyman]

I would include Javascript. staying on the same page and trying to detect when the user has clicked stuff and update the page again in ASP... very hard.

 

[shaddow]

Maybe this could help

<script>
function doAdd()
{
	var src=document.all.sel1;
	var dest=document.all.sel2;
	for(i=0;i<src.options.length;i++)
	if(src.options[i].selected)
	{
		var newEl = document.createElement(&quot;OPTION&quot;);
		newEl.text=src.options[i].value;
		newEl.value=src.options[i].value;
		dest.add(newEl)
		src.options.remove(i);
		i=-1;				
	}
}
function doRem()
{
	var src=document.all.sel2;
	var dest=document.all.sel1;
	for(i=0;i<src.options.length;i++)
	if(src.options[i].selected)
	{
		var newEl = document.createElement(&quot;OPTION&quot;);
		newEl.text=src.options[i].value;
		newEl.value=src.options[i].value;
		dest.add(newEl)
		src.options.remove(i);
		i=-1;				
	}
}
</script>
<table>
<tr>
<td>
	<select name=sel1 multiple size=15>
		<option value=1>1</option>
		<option value=2>2</option>
		<option value=3>3</option>
		<option value=4>4</option>
		<option value=5>5</option>
		<option value=6>6</option>
		<option value=7>7</option>
	</select>
</td>
<td>
	<input type=button value=&quot;  >>  &quot; onclick=&quot;doAdd()&quot;><br><br>
	<input type=button value=&quot;  <<  &quot; onclick=&quot;doRem()&quot;>
</td>
<td>
	<select name=sel2 multiple size=15>
		<option value=8>8</option>
		<option value=9>9</option>
		<option value=0>0</option>
	</select>
</td>
</tr>
</table>

________
George, M

 

[Kendel]

Thanks a bunch Shaddow. That's what I want. Here is a * for you.

kendel

 

[Kendel]

Shaddow,

With that code, the second list box must has some thing in there. If not, it will give me runtime error.

In my case, when the form is first loaded, the second box is empty.

 

[shaddow]

I got no error with this code.

Maybe you dont create the <select></select> tag at all

<script>
function doAdd()
{
	var src=document.all.sel1;
	var dest=document.all.sel2;
	for(i=0;i<src.options.length;i++)
	if(src.options[i].selected)
	{
		var newEl = document.createElement(&quot;OPTION&quot;);
		newEl.text=src.options[i].value;
		newEl.value=src.options[i].value;
		dest.add(newEl)
		src.options.remove(i);
		i=-1;				
	}
}
function doRem()
{
	var src=document.all.sel2;
	var dest=document.all.sel1;
	for(i=0;i<src.options.length;i++)
	if(src.options[i].selected)
	{
		var newEl = document.createElement(&quot;OPTION&quot;);
		newEl.text=src.options[i].value;
		newEl.value=src.options[i].value;
		dest.add(newEl)
		src.options.remove(i);
		i=-1;				
	}
}
</script>
<table>
<tr>
<td>
	<select name=sel1 multiple size=15>
		<option value=1>1</option>
		<option value=2>2</option>
		<option value=3>3</option>
		<option value=4>4</option>
		<option value=5>5</option>
		<option value=6>6</option>
		<option value=7>7</option>
	</select>
</td>
<td>
	<input type=button value=&quot;  >>  &quot; onclick=&quot;doAdd()&quot;><br><br>
	<input type=button value=&quot;  <<  &quot; onclick=&quot;doRem()&quot;>
</td>
<td>
	<select name=sel2 multiple size=15>
	</select>
</td>
</tr>
</table>

________
George, M

 

[Kendel]

Yes, I did have select tags. Must be something else. Anyways, it work now. Thanks again.

 

[shawn876]

Hi This is awesome code.
But have one question:
I have a listbox box which fills in the values plus text of the field.
The other listbox is empty.
I have the two buttons and all.
But when I switch from the empty one to the filled one. It places the value in there only and not the text with it.
How Can I place the value plus the text back into the filled one.
If I refresh the page it works. I do not know how to incorporate that into the function.
For example:
My first listbox has
0903- fraud services
0903 is the value
faud services is the text.
Please help Thanks

 

[shaddow]

You need to change this code then

newEl.text=src.options.value;
newEl.value=src.options.value;
into
newEl.text=src.options.text;
newEl.value=src.options.value;


________
George, M
Searches(faq333-4906),Carts(faq333-4911)

 

[shawn876]

It gives me an error on into.
Also another issue I am having is that when I click on Save button on my form.
It will not save what I have selected in the new listbox.
If I highlight all the ones I have selected and click save it would save that into it. Is there a way to do it without highlighting.
For the first part with the into statement should I place it in both listbox functions?
Thanks

 

[Kendel]

Hey Shawn, you need to select all the items in the listbox first before you can save it. You can select these item automatically by the onSubmit or Onclick event or you can include it in the other javascript function like this:

<input type="button" name="btnSave" value="Save" Onclick="SelectItems()">

<script language="javascript>
function SelectItems() {
for (i=0; i<document.form1.List1.options.length; i++) {
document.form1.List1.options(i).selected = true;
}
}
</script>

 

[shawn876]

Thank you
You get a *