天天看点

两个select列表相互移动

两个select列表相互移动
<html> 

<head><title></title></head> 

<body> 


多选框  arrayList 以ascii进行排序 


<table> 

<tr><td> 

<select id="first" name="first" multiple="multiple" style="height:200px;width:100px" > 

 <option value="1">blue</option> 

 <option value="2">red</option> 

 <option value="3">white</option> 

 <option value="4">001</option> 

 <option value="5">1000</option> 

</select> 


</td> 

<td> 

 <input type="button"  value=">>" οnclick="moveright()" style="width:100px"/> 

 <br /> 

 <input  value="<<" type="button"  οnclick="moveleft()" style="width:100px" /> 

 <br /> 

 <input  value=">>>" type="button" οnclick="moveallright()"  style="width:100px"/> 

 <br /> 

 <input  value="<<<"  type="button" οnclick="moveallLeft()"  style="width:100px"/> 

</td> 


<td> 

 <select id="secord" name="secord" multiple="multiple" style="height:200px;width:100px"> 

 </select> 

</td> 

</tr> 

</table> 


</body> 


<script type="text/javascript"> 


 function moveright(){ 

 var srcList = document.getElementById("first"); 

 var destList = document.getElementById("secord"); 

 moveList(srcList,destList,false); 

 } 


 function moveleft(){ 

 var srcList = document.getElementById("secord"); 

 var destList = document.getElementById("first"); 

 moveList(srcList,destList,false); 

 } 


 function moveallright(){ 

 var srcList = document.getElementById("first"); 

 var destList = document.getElementById("secord"); 

 moveList(srcList,destList,true); 

 } 


 function moveallLeft(){ 

 var srcList = document.getElementById("secord"); 

 var destList = document.getElementById("first"); 

 moveList(srcList,destList,true); 

 } 

} 


 newDestList.sort(function(a,b){return a.text>b.text?1:-1});      
  • ​​​​
  • 大小: 5.4 KB
  • ​​查看图片附件​​

继续阅读