JS从左边移动到右边

1.效果图：

2.代码：

<html><head></head><body><%@ page language="java" iport="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>    <base href="<%=basePath%>" /> <title>JS</title>   <table width="220px;" border="0" height="220px;" cellpadding="0" cellspacing="0" align="center" bgcolor="red;"> <tbody><tr> <td width="126" align="center"> <select name="first" size="10" multiple="multiple" class="td3" id="first"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项6">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> </select> </td> <td width="69" valign="middle"> <input name="add" id="add" type="button" class="button" value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" /> <input name="remove" id="remove" type="button" class="button" value="<--" /> <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> </td> <td width="127" align="center"> <select name="second" size="10" class="td3" id="second"> <option value="选项9">选秀9</option> </select> </td> </tr> </tbody></table>  <script type="text/javascript">
/**********************第一个按钮***********************************************************///选中的从左边移动到右边 //<input name="add" id="add" type="button" class="button" value="-->"/>document.getElementById("add").οnclick=function(){     //<select name="first" size="10" multiple="multiple" class="td3" id="first">var firstElement=document.getElementById("first");//<select name="second" size="10" class="td3" id="second"> var secondElement=document.getElementById("second");      //获取所用option元素var firstOptionElements=firstElement.getElementsByTagName("option"); var len=firstOptionElements.length;//定义固定长度  /**selectedIndex该下标返回下拉列表种选中的索引值*selectedIndex是<select>的属性**/ for(var i=0;i<len;i++){      // alert(firstElement.selectedIndex); if(firstElement.selectedIndex!=-1){   secondElement.appendChild(firstOptionElements[firstElement.selectedIndex]);            }        }  }    /****************************第二个按钮*****************************************************///全部从左边移动到右边//<input name="add_all" id="add_all" type="button" class="button" value="==>"/>document.getElementById("add_all").οnclick=function(){     //<select name="first" size="10" multiple="multiple" class="td3" id="first">var firstElement=document.getElementById("first");//<select name="second" size="10" class="td3" id="second"> var secondElement=document.getElementById("second");      //获取id=first所用option元素var firstOptionElements=firstElement.getElementsByTagName("option"); //获取id=first下所有option元素的个数var len=firstOptionElements.length;   for(var i=0;i<len;i++){      secondElement.appendChild(firstOptionElements[0]);                     }  }
/*********************************************************************************///方法一  、双击从左移动到右      //document.getElementById("first").οndblclick=function(){     //<select name="first" size="10" multiple="multiple" class="td3" id="first">//var firstElement=document.getElementById("first");//<select name="second" size="10" class="td3" id="second"> //var secondElement=document.getElementById("second");      //获取id=first下所有option元素// var firstOptionElements=firstElement.getElementsByTagName("option"); //获取id=first下所有option元素的个数// var len=firstOptionElements.length; // for(var i=0;i<len;i++){  //   if(firstElement.selectedIndex!=-1){     //   secondElement.appendChild(firstOptionElements[firstElement.selectedIndex]);                     //   }//  }    //}
/*********************************************************************************///方法二  、双击从左移动到右      document.getElementById("first").οndblclick=function(){
//<select name="second" size="10" class="td3" id="second">  var secondElement=document.getElementById("second");   /**this表示当前的select id=first的下拉选*this.selectedIndex 双击事件选中的值*this[this.selectedIndex]*/secondElement.appendChild(this[this.selectedIndex]);                        }
/*********************************************************************************/
</script> </body>
</html>

JS从左边移动到右边相关推荐

基于Ajax+div的“左边菜单、右边内容”页面效果实现
效果演示: ①默认页面(index.jsp): ②:点击左侧用户管理标签下的用户列表选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击产品管理.订 ...
N^N最左边和最右边的数（数学）
1763: N^N 时间限制: 1 Sec 内存限制: 128 MB [提交][状态][讨论版] 题目描述现给你一个正整数N,请问N^N的最左边和最右边的数字是什么? 输入输入包含多组测试数据.每 ...
记录一下flex布局左边固定，右边100%
通过设置css的代码,来使得布局变成左边固定,右边100% <style> #flex{ display: flex; } #left{ width: 200px; } #right{ b ...
2018腾讯内部转岗面试题3——找出数组中比左边大比右边的小的元素
题目: 以时间复杂度 O(n) 从长度为 n 的数组中找出同时满足下面两个条件的所有元素: (1)该元素比放在它前面的所有元素都大: (2)该元素比放在它后面的所有元素都小. 分析: 面试官给的上面冗 ...
左边是地狱右边也是地狱_我担任地狱首席执行官的时间
左边是地狱右边也是地狱回顾性 (RETROSPECTIVE) Back in primary school, I was a curious lad. I fit in better with th ...
左边是地狱右边也是地狱_像我这样的设计师的特别地狱
左边是地狱右边也是地狱 by Adrian Hanft 通过阿德里安·汉夫特(Adrian Hanft) 像我这样的设计师的特别地狱 (A Special Hell for Designers Lik ...
左边是地狱右边也是地狱_走出教程地狱
左边是地狱右边也是地狱 Let's face it, we've all been there. Maybe you are still stuck in tutorial hell and are ...
左边是地狱右边也是地狱_地狱甚至还能做些什么（除了拿走我们的钱）
左边是地狱右边也是地狱 As Steam unveils an overhaul to its chat system that barely competes with the rising sta ...
css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

JS从左边移动到右边

JS从左边移动到右边相关推荐

最新文章

热门文章