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


Posted in Javascript onJuly 25, 2015

本文实例讲述了基于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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
javascript实现信息增删改查的方法
Jul 25 #Javascript
jQuery菜单插件用法实例
Jul 25 #Javascript
javascript单例模式的简单实现方法
Jul 25 #Javascript
JavaScript类继承及实例化的方法
Jul 25 #Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 #Javascript
javascript去掉代码里面的注释
Jul 24 #Javascript
Jquery简单分页实现方法
Jul 24 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
PHP 编程的 5个良好习惯
2009/02/20 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
Python assert语句的简单使用示例
2019/07/28 Python
python 提取文件指定列的方法示例
2019/08/07 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
关于打架的检讨书
2014/01/17 职场文书
工作调动申请报告
2015/05/18 职场文书
大学生党课感想
2015/08/11 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
vue3不同环境下实现配置代理
2022/05/25 Vue.js