基于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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
Javascript 面向对象 继承
May 13 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
微信小程序如何实现全局重新加载
Jun 05 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/11/25 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
校园新闻广播稿
2014/01/10 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
中学自我评价
2014/01/31 职场文书
《学会合作》教学反思
2014/04/12 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
三峡大坝导游词
2015/01/31 职场文书
追悼词范文大全
2015/06/23 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript
Rust中的Struct使用示例详解
2022/08/14 Javascript