[JS]Copying options between 2 select lists

LazyManc

LazyManc

LazyManc

Associate
Joined
21 May 2003
Posts
1,365
Guys, my javascript is pretty dire, could do with a hand here please.

I have the following:
  • an "available" select list with x options
  • an "active" select list with y options
  • a button named "activate selected"

When I click the button I want it to copy the selected option in "available" and append it to the "active" list.

If possible I'd like it to copy multiple selected options. I have prototype available so if that's easier then i'll use it.

Code: 
function addOptions() {
   var availableNewsItems = $("avaiableNewsItems");

   // loop here to see whats selected and add them to a temp array?

   // loop through the temp array and insert into active select?
}

How do I detect if an option is selected using DOM?
 
just bashed this together for you - it doesn't involve the submit button. if you want to involve the button, let me know and I'll add that for you :)

Code: 
<html>
	<head>
		<script type='text/javascript' language='Javascript'>
			function CopyOver(from,dest) {
				var copy = from.cloneNode(true);
				var dest = document.getElementById(dest);
				for (i=0;i<dest.childNodes.length;i++) {
					if (dest.childNodes[i].value == copy.value) {
						return false;
					} else {
						var okToCopy = true;
					}
				}
				if (okToCopy === true) {
					dest.appendChild(copy);
				}
			}
		</script>
	</head>
	<body>
		<select multiple='multiple'>
			<option value='1' onclick='CopyOver(this,"dest")'>copy me!</option>
			<option value='2' onclick='CopyOver(this,"dest")'>copy me!1</option>
			<option value='3' onclick='CopyOver(this,"dest")'>copy me!2</option>
			<option value='4' onclick='CopyOver(this,"dest")'>copy me!3</option>
		</select>
		<select id='dest' multiple='multiple'>
			
		</select>
	</body>
</html>

Code: 
if (node.selected === true)

to check for selected nodes
 
Thanks, would I be right in thinking that checks for an existing copy?

here's what I've got so far:

Code: 
function addOption() {
	var availableNewsItems = $("availableNewsItems");
	var activeNewsItems = $("activeNewsItems");
	var selectedOptions = [];
	
	// if an option is selected, add it to a temp array
	for(var i = 0; i < availableNewsItems.options.length; i++) {
		if (availableNewsItems.options[i].selected) {
			var clonedOption = availableNewsItems.options[i].cloneNode(true);
			selectedOptions.push(clonedOption);
		}
	}
	
	// insert the option into the 2nd select
	for (var selectedOption in selectedOptions) {
		activeNewsItems.appendChild(selectedOptions[selectedOption], null);
	}
	
	return true;
}

function removeOption() {
	var activeNewsItems = $("activeNewsItems");
	
	for (var i = activeNewsItems.options.length - 1; i >= 0; i--) {
		if (activeNewsItems.options[i].selected) {
			activeNewsItems.remove(i);
		}
	}
	
	return true;
}

function addAllOptions() {
	var availableNewsItems = $("availableNewsItems");
	var activeNewsItems = $("activeNewsItems");
	var selectedOptions = [];
	
	// if an option is selected, add it to a temp array
	for(var i = 0; i < availableNewsItems.options.length; i++) {
		var clonedOption = availableNewsItems.options[i].cloneNode(true);
		activeNewsItems.appendChild(clonedOption, null);
	}
	
	return true;
}

function removeAllOptions() {
	var availableNewsItems = $("availableNewsItems");
	var activeNewsItems = $("activeNewsItems");
	
	activeNewsItems.options.length = 0;
	
	return true;
}

But i'm getting

"Node cannot be inserted at the specified point in the hierarchy"

errors?? Any ideas?
 
Here's a screengrab of the interface:

listcopy.gif
 
can you post all your code so I can work on it rather than have a guess? ;)

and yeah, it checks to see if the option is already in the destination.

out of curiosity, I've not seen this syntax before...what does it do?

Code: 
$("availableNewsItems")

edit: nm ninja Google powers
 
Last edited:
Sic said:
out of curiosity, I've not seen this syntax before...what does it do?
Code: 
$("availableNewsItems")
Click to expand...
It's typical of a lot of Javascript frameworks, e.g. prototype/jQuery/mootools, and works as a beefed-up element selector akin to the native getElementById.
 
Ok, it's all working in Firefox, sans the check for existing, still issues in IE -

Javascript:
Code: 
function addOption() {
	var availableNewsItems = $("availableNewsItems");
	var activeNewsItems = $("activeNewsItems");
	var selectedOptions = [];
	
	// if an option is selected, insert in 2nd list
	for(var i = 0; i < availableNewsItems.options.length; i++) {
		if (availableNewsItems.options[i].selected) {
			activeNewsItems.appendChild(availableNewsItems.options[i].cloneNode(true));
		}
	}
	
	return true;
}

function removeOption() {
	var activeNewsItems = $("activeNewsItems");
	
	for (var i = activeNewsItems.options.length - 1; i >= 0; i--) {
		if (activeNewsItems.options[i].selected) {
			activeNewsItems.remove(i);
		}
	}
	
	return true;
}

function addAllOptions() {
	var availableNewsItems = $("availableNewsItems");
	var activeNewsItems = $("activeNewsItems");
	var selectedOptions = [];
	
	// if an option is selected, add it to a temp array
	for(var i = 0; i < availableNewsItems.options.length; i++) {
		activeNewsItems.appendChild(availableNewsItems.options[i].cloneNode(true));
	}
	
	return true;
}

function removeAllOptions() {
	var availableNewsItems = $("availableNewsItems");
	var activeNewsItems = $("activeNewsItems");
	
	activeNewsItems.options.length = 0;
	
	return true;
}

HTML:
Code: 
<div id="available" class="column">
	<label>Available</label><br>
	<select name="availableNewsItems[]" id="availableNewsItems" multiple="multiple">
		<option value="4">10CC</option>
		<option value="5">50 Cent</option>
		<option value="12">Akira The Don</option>
		<option value="13">Akon</option>
	</select>
</div>
	
<div class="column" id="addControls">
	<button type="button" id="addSelected" onclick="addOption();">&gt;</button>
	<button type="button" id="removeSelected" onclick="removeOption();">&lt;</button>
	<button type="button" id="addAll" onclick="addAllOptions();">&gt;&gt;</button>
	<button type="button" id="removeAll" onclick="removeAllOptions();">&lt;&lt;</button>
</div>
	
<div id="live" class="column">
	<label>Live</label><br>
	<select name="activeNewsItems[]" id="activeNewsItems" multiple="multiple">
		
	</select>
</div>
	
<div class="column" id="moveControls">
	<button type="button" id="moveTop">↟</button>
	<button type="button" id="moveUp">↑</button>
	<button type="button" id="moveDown">↓</button>
	<button type="button" id="moveBottom">↡</button>
</div>
 
ah, if it's not working in IE, I'm afraid I can't help - using Linux at the moment :/ sorry
 
You must log in or register to reply here.
Back
Top Bottom