?
Solved

Need to Copy items in Select to another Select

Posted on 2009-04-04
5
Medium Priority
?
1,091 Views
Last Modified: 2012-05-06
Hello:

I have a project where I have two select boxes side by side.  I am able to move items from one select to another using the code below.   I didn't write this code.  Once the end user moves the desired items from the first box to the second, I need them to be able to use a drop down box below the two select boxes to make a choice.  The choices in the drop down box come from the second select box.  So, if I have Red, Green, Blue, Yellow and Black in the first box, and the user moves Red, Green, and Blue over to the second box, then the drop down box needs to be populated with Red, Green, and Blue.  They will be able to select just one item from that drop down box.

Again, the code to move items from one select box to another works fine.  I just need to modify it so that it will also populate the drop down box.

Let me know if I've left out some details.

Thanks,

Dan
function MoveItems(lstbxFrom,lstbxTo)
		{
			var list = document.getElementById("selectedItems");
			var newOrder = document.getElementById("newOrder");
			var varFromBox = document.all(lstbxFrom);
			var varToBox = document.all(lstbxTo);
			if ((varFromBox != null) && (varToBox != null)) 
			{ 
				if(varFromBox.length < 1) 
					{
						alert('There are no items in the source ListBox');
						return false;
					}
				if(varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1
				{
					alert('Please select an Item to move');
					return false;
				}
				while ( varFromBox.options.selectedIndex >= 0 ) 
				{ 
					var newOption = new Option(); // Create a new instance of ListItem 
					newOption.text = varFromBox.options[varFromBox.options.selectedIndex].text; 
					newOption.value = varFromBox.options[varFromBox.options.selectedIndex].value; 
					varToBox.options[varToBox.length] = newOption; //Append the item in Target Listbox
					varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox 
				} 
			}
			var s = "";
			for( i=0; i<list.options.length; i++ )
			{
				s += list.options[i].value + "|";
			}
			s = s.substring(0,s.length-1);
			newOrder.value = s;
			return false; 
		}
	
	</script>
 
 
Here's the HTML:
 
<select size="15" name="allItems" id="allItems" style="width:200px;width:200px">
<option value='red'>Red<option>
<option value='green'>Green<option>
<option value='Blue'>Blue<option>
<option value='Yellow>Yellow<option>
<option value='Black'>Black<option>
</select>
<input type = "button" style="width: 25px;" id = "btnMoveLeft" onclick = "MoveItems('selectedItems','allItems')" value="<-">
<input type = "button" style="width: 25px;" id = "btnMoveRight" onclick = "MoveItems('allItems','selectedItems')" value="->">
<select size="15" name="selectedItems" id="selectedItems" style="width: 200px;"></select>
 
Here's the drop down box:
Sort Order:<select name="sortOrder" id="sortOrder" size="15" style="width: 200px;"></select>

Open in new window

0
Comment
Question by:ddotson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 9

Expert Comment

by:djon2003
ID: 24069957
This is maybe not the "perfect" code. But it should do it without any modifications to your function.
<input type = "button" style="width: 25px;" id = "btnMoveLeft" onclick = "MoveItems('selectedItems','allItems');MoveItems('sortOrder','allItems');" value="<-">
<input type = "button" style="width: 25px;" id = "btnMoveRight" onclick = "MoveItems('allItems','selectedItems');MoveItems('allItems','sortOrder');" value="->">

Open in new window

0
 

Author Comment

by:ddotson
ID: 24071796
This triggers the error checking, because when you call the function the second time, there is nothing selected...

I don't mind modifying the function.
0
 
LVL 9

Accepted Solution

by:
djon2003 earned 2000 total points
ID: 24073090
Well..you are right.. The function won't fit your need then..

Here is a pseudocode :
function MoveItems(mainList, toLists, reverse) {
if (reverse == "undefined") {reverse = false;}

if (reverse == true) {
 COPY from first toList to mainList..
 DELETE from toLists  --> Loop/Iterate through the array
}
else {
 COPY to toLists  --> Loop/Iterate through the array
 DELETE from mainList
}
}

Calling the function :
MoveItems('allItems', ['selectedItems','sortOrder']); // From allItems to others
MoveItems('allItems', ['selectedItems','sortOrder'], true); // From others to allItems
0
 

Author Comment

by:ddotson
ID: 24364380
I would like to award points for participation and the pseudocode.
0
 

Author Closing Comment

by:ddotson
ID: 31566670
Thanks for your help on this.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question