<HTML>
<HEAD>
<TITLE> Select drop-down menu </TITLE>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<meta name= "Description" content= "Power by Hill" >
</HEAD>
<BODY>
<p> Select one or more items and click Add or remove (hold down SHIFT or CTRL to select multiple), or double-click on the selection to add and remove. </p>
<form method= "POST" name= "MyForm" >
<table border= "0" width= ">"
<tr>
<TD width= "40%" >
<select style= "width:100%" multiple Name= "List1" size= "ondblclick=" Moveoption (Document.myform.list1, DOCUMENT.MYFORM.LIST2) ">
<option value= "Beijing" > Beijing </option>
<option value= "Shanghai" > Shanghai </option>
<option value= "Shandong" > Shandong </option>
<option value= "Anhui" > Anhui </option>
<option value= "Chongqing" > Chongqing </option>
<option value= "Fujian" > Fujian </option>
<option value= "Gansu" > Gansu </option>
<option value= "Guangdong" > Guangdong </option>
<option value= "Guangxi" > Guangxi </option>
<option value= "Guizhou" > Guizhou </option>
<option value= "Hainan" > Hainan </option>
<option value= "Hebei" > Hebei </option>
<option value= "Heilongjiang" > Heilongjiang </option>
</select>
</td>
<TD width= "20%" align= "Center" >
<input type= "button" value= "Add" onclick= "Moveoption (Document.myform.list1, Document.myform.list2)" ><br/ >
<br/>
<input type= "button" value= "delete" onclick= "Moveoption (Document.myform.list2, document.myform.list1)" >
</td>
<TD width= "40%" >
<select style= "width:100%" multiple Name= "List2" size= "ondblclick=" Moveoption (Document.myform.list2, DOCUMENT.MYFORM.LIST1) ">
</select>
</td>
<td>
<button onclick= "Changepos (list2,-1)" type= "button" > Move Up </button>
<br/>
<button onclick= "Changepos (list2,1)" type= "button" > Move Down </button>
</td>
</tr>
</table>
Value: <input type= "text" name= "City" size= ">"
</form>
<script language= "JavaScript" >
<!--
function Moveoption (e1, E2) {
try{
for (Var i=0;i<e1.options.length;i++) {
if (e1.options[i].selected) {
var e = e1.options[i];
E2.options.add (New Option (E.text, E.value));
E1.remove (i);
Ii=i-1
}
}
Document.myform.city.value=getvalue (DOCUMENT.MYFORM.LIST2);
}
catch (e) {}
}
function GetValue (Geto) {
var allvalue = "";
for (Var i=0;i<geto.options.length;i++) {
Allvalue +=geto.options[i].value + ",";
}
return allvalue;
}
function Changepos (obj,index)
{
if (index==-1) {
if (obj.selectedindex>0) {
Obj.options (Obj.selectedindex). SwapNode (Obj.options (obj.selectedindex-1))
}
}
else if (index==1) {
if (obj.selectedindex<obj.options.length-1) {
Obj.options (Obj.selectedindex). SwapNode (Obj.options (obj.selectedindex+1))
}
}
}
-
</script>
</BODY>
</HTML>
The left-hand list of JS learning notes moves to the list on the right