Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multi Select to Multi Select Help please

Status
Not open for further replies.
mat41

mat41

Programmer
Mar 7, 2004
91
AU
Hi there

This code works very well allowing items to be moved from one multi select area to another onClick. I just cant figure out how to change it to make sure the item that has been moved from the left list to the right is removed from the left list. Any help would be very much appriciated!

This code is 100% cut n paste working code:

<html>
<HEAD>
<title>Mulitiple swap on click</title>
<SCRIPT LANGUAGE="JavaScript">

function moveOver()
{
var boxLength = document.choiceForm.choiceBox.length;
var selectedItem = document.choiceForm.available.selectedIndex;
var selectedText = document.choiceForm.available.options[selectedItem].text;
var selectedValue = document.choiceForm.available.options[selectedItem].value;
var i;
var isNew = true;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
thisitem = document.choiceForm.choiceBox.options.text;
if (thisitem == selectedText) {
isNew = false;
break;
}
}
}
if (isNew) {
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.choiceBox.options[boxLength] = newoption;
}
document.choiceForm.available.selectedIndex=-1;
}
function removeMe() {
var boxLength = document.choiceForm.choiceBox.length;
arrSelected = new Array();
var count = 0;
for (i = 0; i < boxLength; i++) {
if (document.choiceForm.choiceBox.options.selected) {
arrSelected[count] = document.choiceForm.choiceBox.options.value;
}
count++;
}
var x;
for (i = 0; i < boxLength; i++) {
for (x = 0; x < arrSelected.length; x++) {
if (document.choiceForm.choiceBox.options.value == arrSelected[x]) {
document.choiceForm.choiceBox.options = null;
}
}
boxLength = document.choiceForm.choiceBox.length;
}
}
function saveMe() {
var strValues = "";
var boxLength = document.choiceForm.choiceBox.length;
var count = 0;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
if (count == 0) {
strValues = document.choiceForm.choiceBox.options.value;
}
else {
strValues = strValues + "," + document.choiceForm.choiceBox.options.value;
}
count++;
}
}
if (strValues.length == 0) {
alert("You have made no selection(s)");
}
else {
alert("Here are the values you've selected:\r\n" + strValues);
choiceForm.valuesForInsert.value = strValues;
choiceForm.submit();
}
}



</script>
</HEAD>
<BODY>
<form name="choiceForm" action="#" method="post">
<input type="hidden" name="selectedValues" value="0">
<input type="hidden" name="valuesForInsert" value="0">
<table border="0">
<tr>
<td valign="top" width=175>Available Countries:<br>
<select name="available" size=10 onchange="moveOver();">
<option value="1">Australia
<option value="2">New Zealand
<option value="3">USA
<option value="4">Canada
<option value="5">England
<option value="6">Switzerland
<option value="7">Russia
<option value="8">France
<option value="9">Italy
<option value="10">Samoa
</select></td>
<td valign="top">Your Choices:<input type="button" value="Remove" onclick="removeMe();"><br><select multiple name="choiceBox" style="width:150;" size="10"></select></td>
</tr>
<tr>
<td colspan=2 height=10><input type="button" value="Get Selected Values" onclick="saveMe();"></td>
</tr>
</table>
</form>
</body>
</html>

Thank you in advance!
 
Sort by date Sort by votes
document.choiceForm.available.remove(selectedItem);

Code: 
if (isNew) {
	newoption = new Option(selectedText, selectedValue, false, false);
	document.choiceForm.choiceBox.options[boxLength] = newoption;
[red]	document.choiceForm.available.remove(selectedItem);[/red]
}

-Geates


 
Upvote 0 Downvote
Geates - Very nice, thanking you!!!
 
Upvote 0 Downvote
As I said Geates code works very well!! One aspect I am now having trouble with is getting the item to appear back in the left list when removed from the right. Any assistance would be very mush appreciated?

Thank you in advance!
 
Upvote 0 Downvote
before you set the option to null, add it back to the original list

Code: 
if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
	[red]option = document.choiceForm.choiceBox.options[i];
	document.choiceForm.available[document.choiceForm.available.length] = option;[/red]
	document.choiceForm.choiceBox.options[i] = null;
}

However, the item will be appened to the end of the list. Some extra js may be required to put it in the spot from whence it came.

-Geates

 
Upvote 0 Downvote
here is a more efficient method. Instead of iterating through all the options everytime a user changes the selection, simply [blue]pass the selected index[/blue] to the function. Also, to keep the theme of my previous answers, I used the [tt]select[/tt] .add() and .remove() js methods. Doing so requires that a [tt]!DOCTYPE[/tt] be specified.

Can anyone explain to me why the [red].remove()[/red] is not necessary? If it's uncommented, the function removes 2 items from the source [tt]select[/tt]

Code: 
<!DOCTYPE html>
 
<html>
	<HEAD>
		<title>Mulitiple swap on click</title>
		<SCRIPT LANGUAGE="JavaScript">
			function moveRight([blue]index[/blue]) {	
				option = document.choiceForm.available.options[index];			
				option.selected = false;
				document.choiceForm.choiceBox.add(option);
				[red]//document.choiceForm.available.remove(i);[/red]
			}
			
			function moveLeft([blue]index[/blue]){	
				option = document.choiceForm.choiceBox.options[index];			
				option.selected = false;
				document.choiceForm.available.add(option);
				[red]//document.choiceForm.choiceBox.remove(i);[/red]
			}
			
			function saveMe() {
				var strValues = "";
				for (i = 0; i < document.choiceForm.choiceBox.length; i++) {				
					strValues = strValues + ',' + document.choiceForm.choiceBox.options[i].value;
				}
			
				strValues = strValues.substr(1);
				if (strValues.length == 0) {
					alert("You have made no selection(s)");
				}
				else {
					alert("Here are the values you've selected:\r\n" + strValues);
					choiceForm.valuesForInsert.value = strValues;
					choiceForm.submit();
				}
			}
		</script>
	</HEAD>

	<BODY>
		<form name="choiceForm" action="#" method="post">
			<input type="hidden" name="selectedValues" value="0">
			<input type="hidden" name="valuesForInsert" value="0">
	
			<table border="0">
				<tr>
					<td valign="top" width=175>Available Countries:<br>
						<select name="available" size=10 [blue]onclick="moveRight(this.selectedIndex);"[/blue]>
							<option value="1">Australia
							<option value="2">New Zealand
							<option value="3">USA
							<option value="4">Canada
							<option value="5">England
							<option value="6">Switzerland
							<option value="7">Russia
							<option value="8">France
							<option value="9">Italy
							<option value="10">Samoa
						</select>
					</td>
					<td valign="top">
						Your Choices:<br>
						<select multiple name="choiceBox" style="width:150;" size="10" [blue]onclick="moveLeft(this.selectedIndex);"[/blue]></select>
					</td>
				</tr>
				<tr>
					<td colspan=2 height=10><input type="button" value="Get Selected Values" onclick="saveMe();"></td>
				</tr>
			</table>
		</form>
	</body>
</html>

-Geates

 
Upvote 0 Downvote
Personally I'd do it all in the same function, and use the onChange event to make sure the value has been set to the selected option, otherwise you may run into situations where the function runs before the select has changed its value to the selected option. However using onChange event brings up another issue, in that you won't be able to return the selected option from list2 unless you unselect it first. If there are no other options in the list then this cannot be done. So setting the selectedIndex to -1 takes care of that.

Code: 
function moveItems(ddObj)
{
	alert(ddObj.value);
	alert(ddObj.selectedIndex);
	if(ddObj.name == 'list1')
	{
		var destDD = document.forms.choiceForm.choiceBox; 	
	}
	else
	{
		var destDD = document.forms.choiceForm.available;	
	}
	var theOpt = ddObj.options[ddObj.selectedIndex];
	destDD.add(theOpt);
	destDD.selectedIndex = -1;
	
}

As for Geat's question, look in thread216-1698122 for the explanation.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Hi guys - Thanking you both very much for your time, very much appreciated indeed!
 
Upvote 0 Downvote
Hi Guys - After getting this in the SOE, in reference to to Geates 13 Nov 12 11:07 post unfortunately IE 7.0 / 8.0 says 'invalid argument' regarding this line:

document.choiceForm.choiceBox.add(option);

In reference to Geates 13 Nov 12 10:01 post. When I add the two lines which were suggested to get the removed item back in the left list IE says 'object doesnt support this property or method' on line 58 which is:

document.choiceForm.available[document.choiceForm.available.length] = option;


I'm felling like IE doesn't line 'object' perhaps?

Apologies for not saying this destined for IE

Thank you in advance
 
Upvote 0 Downvote
I wrote the solution IE9/FF/Crome. It does not work in IE7 or IE8. I think it's because IE7 and IE8 use "proprietary" web standards - one of the reasons IE is so disliked amongst developers (does Netscape ring a bell?). With IE9, Microsoft began to implement universal web standards. FF and Crome have supported a universal web standard from the get-go.

Unfortunately, I would not be able to tell you how to get it to work in IE7 and 8. Aside from trial and error, I am not well enough familiar with the support discrepencies in IE7/8. I hope someone else has the knowledge to answer you question as I will benefit from it as well :)

-Geates


 
Upvote 0 Downvote
To make it work on most browsers without worrying about chekcing for browser versions, change the add function to an appendChild.

So this:

Code: 
document.choiceForm.choiceBox.[red]add[/red](option);

becomes

Code: 
document.choiceForm.choiceBox.[red][b]appendChild[/b][/red](option);

This should let it work across most browsers in m experience including IE7, and IE8 +


As for the document.choiceForm.available[document.choiceForm.available.length] = option; line, Geats is going to have to explain what he was attempting to do there. Because I don't really understand the logic behind that line.

It seems unnecessary to me, if you call the same appendChild when moving left and right, as that would effectively move the option between the lists without additional code.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
[tt]document.choiceForm.available[document.choiceForm.available.length] = option[/tt]

This worked for me in IE9 to move an item from .choiceBox to .availble. If it's not recognized as a logical command by others, then it probably isn't and IE9 was just covering for my lack of logic in this matter. Although, if you implement the alternative suggestion (.add(), .remove(), .appendChild()), this line of code is completely unnecessary.

Phil, will .appendChild() act the same way as .add() in terms of moving the object or will it create a duplicate object to append, thus producing similar objects on both lists?

-Geates

 
Upvote 0 Downvote
In my experience, it works the same way as add(). It removes the item from one list to add it to the other.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Hi guys - Excellent the .appendChild works a treat!!

Thank you to all three very helpful people, You guys have a fine day where ever you are in the world!!


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
380
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
312
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
321
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
352
xwb
xwb
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
178
berkshirea
berkshirea

Part and Inventory Search

Sponsor

Back
Top