<!-- TWO STEPS TO INSTALL MENU SWAPPER: 1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document --><!-- STEP ONE: Paste this code into the HEAD of your HTML document --><HEAD><SCRIPT LANGUAGE="JavaScript">
<!-- 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[i].text] = tbox.options[i].value;
arrTbox[i] = tbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
if (fbox.options[i].selected && fbox.options[i].value != "") {
arrTbox[tLength] = fbox.options[i].text;
tLength++;
}
else {
arrFbox[fLength] = fbox.options[i].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">
<table><tr><td>
<select multiple size="10" 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>
<option value="5">Delaware</option>
<option value="23">District of Columbia</option>
<option value="58">Florida</option>
<option value="87">Georgia</option>
<option value="98">Hawaii</option>
<option value="53">Idaho</option>
<option value="22">Illinois</option>
<option value="28">Indiana</option>
<option value="89">Iowa</option>
<option value="71">Kansas</option>
<option value="35">Kentucky</option>
<option value="85">Louisiana</option>
<option value="9">Maine</option>
<option value="7">Maryland</option>
<option value="77">Massachusetts</option>
<option value="36">Michigan</option>
<option value="87">Minnesota</option>
<option value="66">Mississippi</option>
<option value="34">Missouri</option>
<option value="50">Montana</option>
<option value="20">Nebraska</option>
<option value="25">Nevada</option>
<option value="32">New Hampshire</option>
<option value="27">New Jersey</option>
<option value="74">New Mexico</option>
<option value="17">New York</option>
<option value="3">North Carolina</option>
<option value="13">North Dakota</option>
<option value="4">Ohio</option>
<option value="21">Oklahoma</option>
<option value="12">Oregon</option>
<option value="48">Pennsylvania</option>
<option value="63">Rhode Island</option>
<option value="82">South Carolina</option>
<option value="14">South Dakota</option>
<option value="72">Tennessee</option>
<option value="49">Texas</option>
<option value="47">Utah</option>
<option value="92">Vermont</option>
<option value="59">Virginia</option>
<option value="52">Washington</option>
<option value="41">West Virginia</option>
<option value="46">Wisconsin</option>
<option value="95">Wyoming</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="10" name="list2" style="width:150">
</select>
</td></tr></table>
</form>
2. Add the last code into the BODY of your HTML document --><!-- STEP ONE: Paste this code into the HEAD of your HTML document --><HEAD><SCRIPT LANGUAGE="JavaScript">
<!-- 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[i].text] = tbox.options[i].value;
arrTbox[i] = tbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
if (fbox.options[i].selected && fbox.options[i].value != "") {
arrTbox[tLength] = fbox.options[i].text;
tLength++;
}
else {
arrFbox[fLength] = fbox.options[i].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">
<table><tr><td>
<select multiple size="10" 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>
<option value="5">Delaware</option>
<option value="23">District of Columbia</option>
<option value="58">Florida</option>
<option value="87">Georgia</option>
<option value="98">Hawaii</option>
<option value="53">Idaho</option>
<option value="22">Illinois</option>
<option value="28">Indiana</option>
<option value="89">Iowa</option>
<option value="71">Kansas</option>
<option value="35">Kentucky</option>
<option value="85">Louisiana</option>
<option value="9">Maine</option>
<option value="7">Maryland</option>
<option value="77">Massachusetts</option>
<option value="36">Michigan</option>
<option value="87">Minnesota</option>
<option value="66">Mississippi</option>
<option value="34">Missouri</option>
<option value="50">Montana</option>
<option value="20">Nebraska</option>
<option value="25">Nevada</option>
<option value="32">New Hampshire</option>
<option value="27">New Jersey</option>
<option value="74">New Mexico</option>
<option value="17">New York</option>
<option value="3">North Carolina</option>
<option value="13">North Dakota</option>
<option value="4">Ohio</option>
<option value="21">Oklahoma</option>
<option value="12">Oregon</option>
<option value="48">Pennsylvania</option>
<option value="63">Rhode Island</option>
<option value="82">South Carolina</option>
<option value="14">South Dakota</option>
<option value="72">Tennessee</option>
<option value="49">Texas</option>
<option value="47">Utah</option>
<option value="92">Vermont</option>
<option value="59">Virginia</option>
<option value="52">Washington</option>
<option value="41">West Virginia</option>
<option value="46">Wisconsin</option>
<option value="95">Wyoming</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="10" name="list2" style="width:150">
</select>
</td></tr></table>
</form>
<head>
<script language="JavaScript">
<!--
function addSrcToDestList() {
destList = window.document.forms[0].destList;
srcList = window.document.forms[0].srcList;
var len = destList.length;
for(var i = 0; i < srcList.length; i++) {
if ((srcList.options[i] != null) && (srcList.options[i].selected)) {var found = false;
for(var count = 0; count < len; count++) {
if (destList.options[count] != null) {
if (srcList.options[i].text == destList.options[count].text) {
found = true;
break;
}
}
}
if (found != true) {
destList.options[len] = new Option(srcList.options[i].text);
len++;
}
}
}
}function deleteFromDestList() {
var destList = window.document.forms[0].destList;
var len = destList.options.length;
for(var i = (len-1); i >= 0; i--) {
if ((destList.options[i] != null) && (destList.options[i].selected == true)) {
destList.options[i] = null;
}
}
}
// -->
</SCRIPT>
</head>
<body>
<center>
<form method="POST">
<table bgcolor="#FFFFCC"><tr>
<td bgcolor="#FFFFCC" width="85">
<select size="6" name="srcList" multiple>
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
<option value="4">Item 4
<option value="5">Item 5
<option value="6">Item 6
</select>
</td>
<td bgcolor="#FFFFCC" width="74" align="center">
<input type="button" value=" 增加到右边 " onClick="javascript:addSrcToDestList()">
<br><br>
<input type="button" value=" 从右边删除 " onclick="javascript:deleteFromDestList();">
</td>
<td bgcolor="#FFFFCC" width="69">
<select size="6" name="destList" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
<option>123</option>
<option>456</option>
<option>789</option>
</select>
<button onclick="if(a1.selectedIndex>=0)a2.appendChild(a1(a1.selectedIndex))">>></button>
<button onclick="if(a2.selectedIndex>=0)a1.appendChild(a2(a2.selectedIndex))"><<</button>
<select id=a2 style="width:100;height:100" multiple>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>