I've found this lovely menu swapper from JavaScript Source which does almost exactly what I want. Only problem is that it doesn't keep track of which select variables were selected if you need to go back to that page once you've pressed submit. I've included checkboxes in the code below which do keep track of what was chosen if you need to click the browser's back button once you've left that page. Can anyone shed any light as to how I can do this? Thanks JW
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Phil Webb (phil@philwebb.com) -->
<!-- Web Site: -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->
<!-- Begin
function move(fbox, tbox) {
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;
for (i = 0; i < tbox.options.length; i++) {
arrLookup[tbox.options.text] = tbox.options.value;
arrTbox = tbox.options.text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options.text] = fbox.options.value;
if (fbox.options.selected && fbox.options.value != "") {
arrTbox[tLength] = fbox.options.text;
tLength++;
}
else {
arrFbox[fLength] = fbox.options.text;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
tbox[c] = no;
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<form name="combo_box" action="foo.htm">
<table><tr><td>
<select multiple size="4" name="list1" style="width:150">
<option value="12">Alabama</option>
<option value="54">Alaska</option>
<option value="65">Arizona</option>
<option value="45">Arkansas</option>
<option value="2">California</option>
<option value="6">Colorado</option>
<option value="81">Connecticut</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" onClick="move(this.form.list2,this.form.list1)" value="<<">
<input type="button" onClick="move(this.form.list1,this.form.list2)" value=">>">
</td>
<td>
<select multiple size="4" name="list2" style="width:150">
</select>
</td></tr></table>
<input type="checkbox" name="checkbox" value="checkbox">
<input type="checkbox" name="checkbox2" value="checkbox">
<input type="checkbox" name="checkbox3" value="checkbox">
<input type="checkbox" name="checkbox4" value="checkbox">
<input type="checkbox" name="checkbox5" value="checkbox">
<input type="checkbox" name="checkbox6" value="checkbox">
<input type="checkbox" name="checkbox7" value="checkbox">
<input type="submit" name="google" value="Submit">
</form>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href=" JavaScript Source</a></font>
</center><p>
<!-- Script Size: 4.75 KB -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Phil Webb (phil@philwebb.com) -->
<!-- Web Site: -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->
<!-- Begin
function move(fbox, tbox) {
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;
for (i = 0; i < tbox.options.length; i++) {
arrLookup[tbox.options.text] = tbox.options.value;
arrTbox = tbox.options.text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options.text] = fbox.options.value;
if (fbox.options.selected && fbox.options.value != "") {
arrTbox[tLength] = fbox.options.text;
tLength++;
}
else {
arrFbox[fLength] = fbox.options.text;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
tbox[c] = no;
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<form name="combo_box" action="foo.htm">
<table><tr><td>
<select multiple size="4" name="list1" style="width:150">
<option value="12">Alabama</option>
<option value="54">Alaska</option>
<option value="65">Arizona</option>
<option value="45">Arkansas</option>
<option value="2">California</option>
<option value="6">Colorado</option>
<option value="81">Connecticut</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" onClick="move(this.form.list2,this.form.list1)" value="<<">
<input type="button" onClick="move(this.form.list1,this.form.list2)" value=">>">
</td>
<td>
<select multiple size="4" name="list2" style="width:150">
</select>
</td></tr></table>
<input type="checkbox" name="checkbox" value="checkbox">
<input type="checkbox" name="checkbox2" value="checkbox">
<input type="checkbox" name="checkbox3" value="checkbox">
<input type="checkbox" name="checkbox4" value="checkbox">
<input type="checkbox" name="checkbox5" value="checkbox">
<input type="checkbox" name="checkbox6" value="checkbox">
<input type="checkbox" name="checkbox7" value="checkbox">
<input type="submit" name="google" value="Submit">
</form>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href=" JavaScript Source</a></font>
</center><p>
<!-- Script Size: 4.75 KB -->
