基于javascript实现单选及多选的向右和向左移动实例

更新时间：2015年07月25日 16:37:52 作者：whylyq

这篇文章主要介绍了基于javascript实现单选及多选的向右和向左移动,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下：

方法一：

<body>
<h1>实现单选及多选的向右和向左移动</h1>
<div id="lst">
  <span>
  <select id="lselect" size="10" multiple="multiple" style="width: 100px; background-color:blue;">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
  <option>选项5</option>
  <option>选项6</option>
  <option>选项7</option>
  <option>选项8</option>
  <option>选项9</option>
  <option>选项10</option>
  </select>
  <span style="width: 200px;height: 100px;">
  <input type="button" value="单个向右移动" onclick="oneRMove()" />
  <input type="button" value="多个向右移动" onclick="moveRMove()" />
  <input type="button" value="单个向左移动" onclick="oneLMove()" />
  <input type="button" value="多个向左移动" onclick="moveLMove()" />
  </span>
  <span>
  <select id="rselect" size="10" style="width: 100px;background-color: yellow;" multiple="multiple">
  </select>
  </span>
  </span>
</div> 
</body>
<script type="text/javascript">
window.onload = function(){}
//获取select对象
var lselect=document.getElementById("lselect");
var rselect=document.getElementById("rselect");
//获取lselect和roptions对象中的所有option
var loptions=lselect.options;
var roptions=rselect.options;
function oneRMove(){
for(var i=0;i<loptions.length;i++){
var op=loptions[i];
if(op.selected){
rselect.appendChild(op);
break;
}
}
}
function moveRMove(){
for(var i=0;i<loptions.length;i++){
var op=loptions[i];
if(op.selected){
rselect.appendChild(op);
i--;
}
}
}
function oneLMove(){
for(var i=0;i<roptions.length;i++){
var op=roptions[i];
if(op.selected){
lselect.appendChild(op);
break;
}
}
}
function moveLMove(){
for(var i=0;i<roptions.length;i++){
var op=roptions[i];
if(op.selected){
lselect.appendChild(op);
i--;
}
}
}
</script>

方法二：

<script type="text/javascript">
sortitems = 1;
function move(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
  }
}
BumpUp(fbox);
if (sortitems) SortD(tbox);
}
function BumpUp(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "") {
for(var j=i; j<box.options.length-1; j++) {
box.options[j].value = box.options[j+1].value;
box.options[j].text = box.options[j+1].text;
}
var ln = i;break;
  }
}
if(ln < box.options.length) {
box.options.length -= 1;
BumpUp(box);
  }
}
function SortD(box) {
var temp_opts = new Array();         
var temp = new Object();           
for(var i=0; i<box.options.length; i++) { 
temp_opts[i] = box.options[i];
}
for(var x=0; x<temp_opts.length-1; x++) {
for(var y=(x+1); y<temp_opts.length; y++) {
if(temp_opts[x].text > temp_opts[y].text) {
temp = temp_opts[x].text;
temp_opts[x].text = temp_opts[y].text;
temp_opts[y].text = temp;
temp = temp_opts[x].value;
temp_opts[x].value = temp_opts[y].value;
temp_opts[y].value = temp;
   }
  }
}
for(var i=0; i<box.options.length; i++) {
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
  }
}
</script>
</head>
<body>
<form ACTION="" METHOD="POST">
<table border="0">
<tr>
<td><select multiple size="5" name="list1">
<option value="l1">A</option>
<option value="l2">B </option>
<option value="l3">C</option>
<option value="l4">D</option>
</select></td>
<td>
<input type="button" value="向右" onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
<input type="button" value="向左" onclick="move(this.form.list2,this.form.list1)" name="B2">
</td>
<td><select multiple size="5" name="list2">
<option value="r1">E</option>
<option value="r2">F </option>
<option value="r3">G</option>
<option value="r4">H</option>
</select></td>
</tr>
</table>
</form>
</body>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

详解JavaScript正则表达式之RegExp对象
这篇文章主要介绍了JavaScript正则表达式之RegExp对象，对RegExp对象的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下
2015-12-12
JavaScript中作用域链的概念及用途讲解
这篇文章主要介绍了JavaScript中作用域链的概念及用途讲解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
按钮接受回车事件的三种实现方法
这篇文章主要介绍了按钮接受回车事件的三种实现方法,需要的朋友可以参考下
2014-06-06
js防抖具体实现以及详细原理步骤说明(附实例)
节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,下面这篇文章主要给大家介绍了关于js防抖具体实现以及详细原理步骤的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
微信小程序如何访问公众号文章
这篇文章主要介绍了微信小程序如何访问公众号文章，随着小程序不断的发展，现在个人的小程序也开放了很多功能了，个人小程序直接打开公众号链接。在群里看到的一款小程序，点击可以直接阅读文章了,需要的朋友可以参考下
2019-07-07
JS实现仿腾讯微博无刷新删除微博效果代码
这篇文章主要介绍了JS实现仿腾讯微博无刷新删除微博效果代码,涉及JavaScript实现Ajax无刷新删除的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
js数字输入框(包括最大值最小值限制和四舍五入)
以前需要做一个数字输入的InputBox,结果无奈需求太BT，搞得焦头烂额，重做了无数次。无奈之下，再次Google，发现早有成熟的插件了(闷在家里造轮子果然不好啊)，autoNumeric使用方便，功能强大，现在介绍给大家，一个非常好的jquery plugin。
2009-11-11
JS 操作Array数组的方法及属性实例解析
本篇文章主要是对JS操作Array数组的方法及属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
JavaScript 注册表访问实现代码
下面的代码是读取media palyer的默认路径。运行后确认即可，本程序没有安全问题，大家放心测试。
2009-07-07
JS模拟简易滚动条效果代码(附demo源码)
这篇文章主要介绍了JS模拟简易滚动条效果代码,可模拟出滚动条拖动显示的效果,涉及JavaScript鼠标事件的响应及页面元素运算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2016-04-04

基于javascript实现单选及多选的向右和向左移动实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具