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

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

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

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. jsp - 中文名文件导出有关问题
  2. 在JSON中怎么通过id找到匹配的信息
  3. ie7使用 attachEvent的有关问题
  4. extjs读书笔记(1)
  5. javascript获取style里设置样式的有关问题
  6. 运用 XStream 在 JavaBean 与 XML/JSON 之间相互转换
  7. 鼠标点击组件相应的div显示有关问题
  8. Javascript的调试凶器：Firebug使用详解
  9. ant jsch.jar - 一个错误及解决办法