[JS]Copying options between 2 select lists

LazyManc · 12 Oct 2007 at 12:34

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?

LazyManc · 12 Oct 2007 at 15:42

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?

LazyManc · 12 Oct 2007 at 15:50

Here's a screengrab of the interface:

LazyManc · 12 Oct 2007 at 16:47

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>

LazyManc · 15 Oct 2007 at 10:50

As usual, I've found exactly what I wanted on the net done 100x better, but only after spending ages faffing around myself. Ho-hum.

http://www.javascripttoolbox.com/lib/selectbox/examples.php

Now I just need to add moveOptionTop and moveOptionBottom functions and my UI is complete!