基于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 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
vue制作抓娃娃机的示例代码
Apr 17 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新手上路(五)
2006/10/09 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
如何利用python查找电脑文件
2018/04/27 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python八皇后问题的解决方法
2018/09/27 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
PyQt5实现简易计算器
2020/05/30 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
上海微创软件面试题
2012/06/14 面试题
保护环境倡议书
2014/04/14 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
民用住房租房协议书
2014/10/29 职场文书
中秋节寄语2015
2015/03/24 职场文书
单位更名证明
2015/06/18 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL