基于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 相关文章推荐
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
layui导出所有数据的例子
Sep 10 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
微信小程序自定义胶囊样式
Dec 27 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
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
解析php常用image图像函数集
2013/06/24 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
初识Node.js
2014/09/03 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python多线程下信号处理程序示例
2019/05/31 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
兼职学生的自我评价
2013/11/24 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
竞聘上岗演讲
2014/05/19 职场文书
毕业生实习证明
2014/09/19 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2014年采购部工作总结
2014/11/20 职场文书
就业推荐表导师评语
2014/12/31 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android