Multiple Select

**dcp** · 08-04-2006, 06:15 PM

I'm using code from Gizmola's MySQL/PHP Tutorial, and am having a terrible time getting the JavaScript Chooser to work.

The code below is supposed to move values from one form element to another by clicking an HTML button. Trouble is, when I select one option to move, it moves as anticipated, but all the options above it (except the topmost) disappear.

The code is below. I apologize if this is obvious, but I'm not seeing it.

dcp

____________________

<script language="JavaScript">

</script>

<form action="?action=load" method="post" name="site_form" >

<table>
<tr>
<td style="width: 200px;"><select name="list_u[]" multiple="multiple" size="7">
<option value="1">Bernalillo</option>
<option value="2">Catron</option>
<option value="3">Chaves</option>
<option value="4">Cibola</option>
<option value="5">Colfax</option>
<option value="6">Curry</option>
<option value="7">De Baca</option>
<option value="8">Dona Ana</option>
<option value="9">Eddy</option>
<option value="10">Grant</option>

</select>
</td>

<td style="width: 100px; text-align: center;"><input type="button" value=" >> " onclick="move(document.forms[0].elements['list_u[]'],document.forms[0].elements['list_s[]'])"><br />

<input type="button" value=" << " onclick="move(document.forms[0].elements['list_s[]'],document.forms[0].elements['list_u[]'])"></td>

<td style="width: 200px;">
<select name="list_s[]" size="7" multiple="multiple">
</select></td></tr></table></td></tr><tr><td> </td><td><input name="submit" type="button" value="Submit" /></td></tr></table><br /><br />
</form>

**funkdaddu** · 01:48 AM

That script doesn't seem very streamlined... try this. I whipped it up from scratch - it's about half the size. Please test in IE though, I don't have a copy to try out at home:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
function moveOptions(fromBox,toBox,sort) {
	//set our variables
	selectedOptions = new Array();
	fromBoxLength = fromBox.options.length;
	toBoxLength = toBox.options.length;

	//find selected options, add them to an array and then delete them
	for (x=fromBoxLength-1; x>-1; x--) {
		if (fromBox.options[x].selected == true) {
			selectedOptions.push(fromBox.options[x]);
			fromBox.options[x].parentNode.removeChild(fromBox.options[x]);
		}
	}
	
	//put selected options into new box
	for (y in selectedOptions) {
		toBox.appendChild(selectedOptions[y]);
	}
	
	//sort array by name alphabetically
	if (sort) {
		var sortArray = new Array();
		for (z=toBox.options.length-1; z>-1; z--) {
			sortArray.push(toBox.options[z]);
			toBox.options[z].parentNode.removeChild(toBox.options[z]);
		}
		sortArray.sort(optionsSorter);
		for (a in sortArray) {
			toBox.appendChild(sortArray[a]);
		}
	}
	fromBox.focus();
}

function optionsSorter(a,b) {
	return a.text > b.text;
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<form action="./?action=load" method="post" name="site_form">
			<table>
				<tr>
					<td style="width: 200px;"><select name="list_u[]" multiple="multiple" size="7">
							<option value="1">Bernalillo</option>
							<option value="2">Catron</option>
							<option value="3">Chaves</option>
							<option value="4">Cibola</option>
							<option value="5">Colfax</option>
							<option value="6">Curry</option>
							<option value="7">De Baca</option>
							<option value="8">Dona Ana</option>
							<option value="9">Eddy</option>
							<option value="10">Grant</option>
						</select></td>
					<td style="width: 100px; text-align: center;"><input type="button" value=" &gt;&gt; " onclick="moveOptions(document.forms[0].elements['list_u[]'],document.forms[0].elements['list_s[]'],true)"><br />
						 <input type="button" value=" &lt;&lt; " onclick="moveOptions(document.forms[0].elements['list_s[]'],document.forms[0].elements['list_u[]'],true)"></td>
					<td style="width: 200px;"><select name="list_s[]" size="7" multiple="multiple"></select></td>
				</tr>
			</table>
		</form>
	</body>

</html>

**funkdaddu** · 12:01 PM

Hmm it's not sorting reliably... I'll check it out in the morning...

EDIT: OK Here is the new optionsSorter function:

Code:

function optionsSorter(a,b) {
    var c = a.text;
    var d = b.text;
    return ((c < d) ? -1 : ((c > d) ? 1 : 0));
}

replace the old function, and it will work now.