View Full Version : Moving items in a Listbox

Nov 12th, 2004, 09:41 PM
Hi Everyone!! I have a fully working listbox that I'm having troubles with. The idea is to select from the first box and add to the second box. I've done this a variety of ways and wanted to use DOM as it solves some speed issues with the other solutions if the elements in the boxes are in the thousands.

The problem I'm having may be in IE6, note how using the code below that you can move items over to the right hand side using "Add >" and it sorts it the result like a good script. But when you start to move things the other way using "< Rem" the first box is fine, but the 2nd box never bothers to remove the results! From there on, the moving is pretty much broken. I suspect this is an IE bug since if I ALT+TAB and hide the browser then go back the results are as they should be, however, perhaps I'm just doing something dumb in my code? Help? :)

<title>Swap Test</title>
<script language="JavaScript">
function domSwap(fromList, toList) {
// If nothing is selected then return
var selIndex = fromList.selectedIndex;
if(selIndex < 0) { return; }

// Prepare variables
var arrLookup = new Array(); // To quickly find the index of the text
var arrToList = new Array(); // To use JavaScripts builtin sort
var newToList = toList.cloneNode(false); // Only clone the parent

// Decrement to keep the changing index from affecting the moves
for(var i = fromList.length - 1; i >= 0; i--) {
arrLookup[fromList.options.item(i).text] = i;
if(fromList.options.item(i).selected) {
// Append to the toList unsorted initially

// Prepare the sorting arrays
for( var i = 0; i < toList.length; i++) {
arrLookup[toList.options.item(i).text] = i;
arrToList[i] = toList.options.item(i).text;
arrToList.sort(); // <-- Where the action really occurs

// Decrement to keep the index from being affected
for( var i = arrToList.length - 1; i >= 0; i-- ) {
// Use insertBefore instead of appendChild because of decrementing.
newToList.insertBefore(toList.options.item(arrLookup[arrToList[i]]).cloneNode(true), newToList.options.item(0));

// Swap the unsorted node with the sorted one.

// Deselect any selected options.
fromList.selectedIndex = -1;
toList.selectedIndex = -1;


<form name="f">
<table border="0">
<select size="6" id="tableOne" name="tableOne">
<option value="alpha">alpha</option>
<option value="charlie">charlie</option>
<option value="echo">echo</option>
<option value="golf">golf</option>
<td valign="top">
<input type="button" value="Add >" onClick="domSwap(document.getElementById('tableOne'), document.getElementById('tableTwo'));"/><br> <br>
<input type="button" value="< Rem" onClick="domSwap(document.getElementById('tableTwo'), document.getElementById('tableOne'))"/><br>
<select size="6" id="tableTwo" name="tableTwo">
<option value="bravo">bravo</option>
<option value="delta">delta</option>
<option value="foxtrot">foxtrot</option>
<option value="hotel">hotel</option>
</select> </td>


Nov 12th, 2004, 10:18 PM
I was trying to debug your code and commented out:


after this it seems that the script works fine.

Nov 12th, 2004, 11:54 PM
Ah, so perhaps the replaceNode isn't fleshed out. It takes out my clever way of sorting behind the scenes, but I guess I'll deal with it. :( I'll try it out on Monday, since at night I masquerade as a Mac user. :)

Nov 15th, 2004, 03:16 PM
Thanks Allida! But I couldn't forego my sorting, so I put in a hack. It seems that by adding the line

// Swap the unsorted node with the sorted one.
fromList.swapNode(fromList); // IE workaround
forces IE to refresh the listbox and the sorting that was done behind the scene shows itself. :rolleyes: