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

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

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

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. button disabled的有关问题
  2. js掩藏控件
  3. 阳历转换农历的算法(JavaScript)
  4. 新人初来乍到，有一些有关问题想求教，关于怎么获得html代码
  5. 关于设置checkbox已经选择的有关问题
  6. java学习札记8 Servlet/Jsp
  7. js 闭包之小弟我的理解
  8. hibernate中多表联系关系的表对象转化为JSON格式时出错
  9. node.js的global variable，跟module.exports