javascript实现的左右选择框效果代码

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%20%0D%0A%3C!--%20Begin%20%0D%0Asortitems%20%3D%201%3B%20%20%2F%2F%20Automatically%20sort%20items%20within%20lists%3F%20(1%20or%200)%20%0D%0A%0D%0A%20function%20move(fbox%2Ctbox)%20%7B%20%0D%0A%20%20for(var%20i%3D0%3B%20i%3Cfbox.options.length%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20if(fbox.options%5Bi%5D.selected%20%26%26%20fbox.options%5Bi%5D.value%20!%3D%20%22%22)%20%7B%20%0D%0A%20%20%20%20var%20no%20%3D%20new%20Option()%3B%20%0D%0A%20%20%20%20no.value%20%3D%20fbox.options%5Bi%5D.value%3B%20%0D%0A%20%20%20%20no.text%20%3D%20fbox.options%5Bi%5D.text%3B%20%0D%0A%20%20%20%20tbox.options%5Btbox.options.length%5D%20%3D%20no%3B%20%0D%0A%20%20%20%20fbox.options%5Bi%5D.value%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20fbox.options%5Bi%5D.text%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%20BumpUp(fbox)%3B%20%0D%0A%20if%20(sortitems)%20SortD(tbox)%3B%20%0D%0A%20%7D%20%0D%0A%0D%0A%20%20%20function%20moveall(fbox%2Ctbox)%20%7B%20%0D%0A%20%20for(var%20i%3D0%3B%20i%3Cfbox.options.length%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20if(fbox.options%5Bi%5D.value%20!%3D%20%22%22)%20%7B%20%0D%0A%20%20%20%20var%20no%20%3D%20new%20Option()%3B%20%0D%0A%20%20%20%20no.value%20%3D%20fbox.options%5Bi%5D.value%3B%20%0D%0A%20%20%20%20no.text%20%3D%20fbox.options%5Bi%5D.text%3B%20%0D%0A%20%20%20%20tbox.options%5Btbox.options.length%5D%20%3D%20no%3B%20%0D%0A%20%20%20%20fbox.options%5Bi%5D.value%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20fbox.options%5Bi%5D.text%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%20BumpUp(fbox)%3B%20%0D%0A%20if%20(sortitems)%20SortD(tbox)%3B%20%0D%0A%20%7D%20%0D%0A%0D%0A%0D%0A%20function%20BumpUp(box)%20%20%7B%20%0D%0A%20%20for(var%20i%3D0%3B%20i%3Cbox.options.length%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20if(box.options%5Bi%5D.value%20%3D%3D%20%22%22)%20%20%7B%20%0D%0A%20%20%20%20%20%20%20for(var%20j%3Di%3B%20j%3Cbox.options.length-1%3B%20j%2B%2B)%20%20%7B%20%0D%0A%20%20%20%20%20%20%20box.options%5Bj%5D.value%20%3D%20box.options%5Bj%2B1%5D.value%3B%20%0D%0A%20%20%20%20%20%20%20box.options%5Bj%5D.text%20%3D%20box.options%5Bj%2B1%5D.text%3B%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20var%20ln%20%3D%20i%3B%20%0D%0A%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%20%20if(ln%20%3C%20box.options.length)%20%20%7B%20%0D%0A%20%20box.options.length%20-%3D%201%3B%20%0D%0A%20%20BumpUp(box)%3B%20%0D%0A%20%20%20%20%20%7D%20%0D%0A%20%7D%20%0D%0A%0D%0Afunction%20SortD(box)%20%20%7B%20%0D%0A%20var%20temp_opts%20%3D%20new%20Array()%3B%20%0D%0A%20var%20temp%20%3D%20new%20Object()%3B%20%0D%0A%20for(var%20i%3D0%3B%20i%3Cbox.options.length%3B%20i%2B%2B)%20%20%7B%20%0D%0A%20temp_opts%5Bi%5D%20%3D%20box.options%5Bi%5D%3B%20%0D%0A%20%7D%20%0D%0A%0D%0A%20for(var%20x%3D0%3B%20x%3Ctemp_opts.length-1%3B%20x%2B%2B)%20%20%7B%20%0D%0A%20%20%20for(var%20y%3D(x%2B1)%3B%20y%3Ctemp_opts.length%3B%20y%2B%2B)%20%20%7B%20%0D%0A%20%20%20%20%20if(temp_opts%5Bx%5D.text%20%3E%20temp_opts%5By%5D.text)%20%20%7B%20%0D%0A%20%20%20%20%20temp%20%3D%20temp_opts%5Bx%5D.text%3B%20%0D%0A%20%20%20%20%20temp_opts%5Bx%5D.text%20%3D%20temp_opts%5By%5D.text%3B%20%0D%0A%20%20%20%20%20temp_opts%5By%5D.text%20%3D%20temp%3B%20%0D%0A%20%20%20%20%20temp%20%3D%20temp_opts%5Bx%5D.value%3B%20%0D%0A%20%20%20%20%20temp_opts%5Bx%5D.value%20%3D%20temp_opts%5By%5D.value%3B%20%0D%0A%20%20%20%20%20temp_opts%5By%5D.value%20%3D%20temp%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%7D%20%0D%0A%0D%0A%20for(var%20i%3D0%3B%20i%3Cbox.options.length%3B%20i%2B%2B)%20%20%7B%20%0D%0A%20box.options%5Bi%5D.value%20%3D%20temp_opts%5Bi%5D.value%3B%20%0D%0A%20box.options%5Bi%5D.text%20%3D%20temp_opts%5Bi%5D.text%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%20%20%0D%0A%0D%0A%0D%0A%20%20%20%0D%0A%2F%2F%20End%20--%3E%20%0D%0A%3C%2Fscript%3E">

<form ACTION="" METHOD="POST"> 
<table border="0"> 
<tr> 
<td><select multiple size="5" name="list1" style="width:250px"> 
<option value="11"> item 1.1 </option> 
<option value="12"> item 1.2 </option> 
<option value="13"> item 1.3 </option> 
</select></td> 
<td> 
<input type="button" value="   >   " onclick="move(this.form.list1,this.form.list2)" name="B1">
 
<input type="button" value="   <   " onclick="move(this.form.list2,this.form.list1)" name="B2">

<input type="button" value="   >>   " onclick="moveall(this.form.list1,this.form.list2)" name="B3">
 
<input type="button" value="   <<   " onclick="moveall(this.form.list2,this.form.list1)" name="B4"> 
</td> 
<td><select multiple size="5" name="list2" style="width:250px"> 
<option value="21"> item 2.1 </option> 
<option value="22"> item 2.2 </option> 
<option value="23"> item 2.3 </option> 
</select></td>

</tr> 
</table> 
</form>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程