1. 爱易网页
  2. JavaSript
  3. js实现左右2个上拉选择框，左右下上移动功能

js实现左右2个上拉选择框，左右下上移动功能

日期：2014-05-16　 浏览次数：20307 次

js实现左右2个下拉选择框，左右上下移动功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
</HEAD>

<BODY>
  <!-- MIDDLE BUTTONS -->
<form name=frm1>
<table width="100%" border="0" align="center" cellpadding="1" cellspacing="1" class="docBoxNoPanel">
<tr >
    <td nowrap="nowrap">&nbsp;</td>
<td width="50%" align="center">
<select name="SrcSelect" size=6 style="height:160px;width:98%" multiple ondblclick="moveLeftOrRight(document.frm1.SrcSelect,document.frm1.ObjSelect)">
            <option value="001">第一项</option>
<option value="002">第二项</option>
<option value="003">第三项</option>
<option value="004">第四项</option>
<option value="005">第五项</option>
<option value="006">第六项</option>
<option value="007">第七项</option>
<option value="008">第八项</option>
<option value="009">第九项</option>
<option value="010">第十项</option>
        </select>

    </td>
    <td width="30px" align="center">
        <input align="left" type=button value=">>" title="全部右移" onclick="moveLeftOrRightAll(document.frm1.SrcSelect,document.frm1.ObjSelect)" ><br>
        <input align="left" type=button value=">"  title="右移" onclick="moveLeftOrRight(document.frm1.SrcSelect,document.frm1.ObjSelect)" ><br>
        <input type=button value="↑" title="上移" onclick="moveUp(document.frm1.ObjSelect)" ><br>
        <input type=button value="↓" title="下移" onclick="moveDown(document.frm1.ObjSelect)" ><br>
        <input align="left" type=button value="<" title="左移" onclick="moveLeftOrRight(document.frm1.ObjSelect,document.frm1.SrcSelect)" ><br>
        <input align="left" type=button value="<<" title="全部左移" onclick="moveLeftOrRightAll(document.frm1.ObjSelect,document.frm1.SrcSelect)" >
    </td>
    <td width="50%" align="center">
        <select name="ObjSelect" size=6 style="height:160px;width:98%" multiple ondblclick="moveLeftOrRight(document.frm1.ObjSelect,document.frm1.SrcSelect)">
        </select>
    </td>
</tr>
<tr>
<td colspan="4"><button name="selectCheck" onclick="checkSelectedOption();">选中查看</button></td>
</tr>
</table>
</form>
</BODY>
</HTML>



<script language="javascript">
//选中项向左移动或向右移动
function moveLeftOrRight(fromObj,toObj){
    var fromObjOptions=fromObj.options;
    for(var i=0;i<fromObjOptions.length;i++){
        if(fromObjOptions[i].selected){
            toObj.appendChild(fromObjOptions[i]);
            i--;

相关资料更多>

  1. 为select的option添加checkbox解决思路
  2. 一个js与as3交互的例子(Firefox上正常)
  3. struts2+javascript 刷新页面后，输入框中的内容没有被清除,该怎么处理
  4. 关于ajax的post参数解决思路
  5. 关于pre内字体和颜色的有关问题
  6. 自各儿学习js的经历和一些学习js的看法
  7. textarea的文字段?该怎么处理
  8. js中select剔除全部option的值的方法
  9. 哪位高手帮小弟我看看这个只能输入汉字的有关问题