<table cellspacing="1" width="350px" align="center">
<tr>
<td>
<table style="background-color:white" width="100%">
<tr>
<td>
<fieldset>
<legend>审核人员</legend>
<select name="left_select" multiple="multiple" size="10" id="left_select" style="width : 152px">
</select>
</fieldset>
</td>
<td>
<input type="button" value="<" style="font-size:10pt;width:35px" onclick="left()"><br>
<input type="button" value="<<" style="font-size:10pt;width:35px" onclick="left(true)"><br>
<input type="button" value=">" style="font-size:10pt;width:35px" onclick="right()"><br>
<input type="button" value=">>" style="font-size:10pt;width:35px" onclick="right(true)"><br>
</td>
<td>
<fieldset>
<legend>系统人员</legend>
<select name="right_select" multiple="multiple" style="width : 152px" size="10" id="right_select">
<option value="zhangsan">zhangsan</option>
<option value="lisi">lisi</option>
<option value="lisi">lisi</option>
<option value="wangwu">wangwu</option>
</select>
</fieldset>
</td>
</tr>
</table>
</td>
</tr>
</table>

界面如下图

首先jquery第一种方法:

//isAll 是否全部移动
function left(isAll){
var os = new Array();
os = $("#right_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
var o = new Option(os[i].text,os[i].value);
$("#left_select").append(o);
$("#right_select").find("option").remove();
// == $("#right_select").empty();
}else{
if(os[i].selected){
var o = new Option(os[i].text,os[i].value);
$("#left_select").append(o);
$("#right_select").find("option:selected").remove();
}
}
}
}
function right(isAll){
var os = new Array();
os = $("#left_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
var o = new Option(os[i].text,os[i].value);
$("#right_select").append(o);
$("#left_select").find("option").remove();
// == $("#left_select").empty();
}else{
if(os[i].selected){
var o = new Option(os[i].text,os[i].value);
$("#right_select").append(o);
$("#left_select").find("option:selected").remove();
}
}
}
}

第二种方法:

/**
* 此方法 移动的时候会自动删除 不用手动去 remove
* 但移走的选项会默认选中 无法取消,代码虽少,效果但不如第一种
*/
function left(isAll){
var os = new Array();
os = $("#right_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
$("#left_select").append(os[i]);
}else{
if(os[i].selected){
$("#left_select").append(os[i]);
}
}
}
}
function right(isAll){
var os = new Array();
os = $("#left_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
$("#right_select").append(os[i]);
}else{
if(os[i].selected){
$("#right_select").append(os[i]);
}
}
}
}

JS实现如下:

function left(isAll)
{
var os=new Array();
os=document.getElementById("right_select").options;
for(i=0;i<os.length;i++){
if(isAll){
var o=new Option(os[i].text,os[i].value);
document.getElementById("left_select").add(o);
document.getElementById("right_select").remove(i);
i--;
}else{
if(os[i].selected){
var o=new Option(os[i].text,os[i].value);
document.getElementById("left_select").add(o);
document.getElementById("right_select").remove(i);
i--;
}
}
}
}
function right(isAll)
{
var os=new Array();
os=document.getElementById("left_select").options;
for(i=0;i<os.length;i++){
if(isAll){
var o=new Option(os[i].text,os[i].value);
document.getElementById("right_select").add(o);
document.getElementById("left_select").remove(i);
i--;
}else{
if(os[i].selected){
var o=new Option(os[i].text,os[i].value);
document.getElementById("right_select").add(o);
document.getElementById("left_select").remove(i);
i--;
}
}
}
}

jquery以及js实现option左移右移的更多相关文章

  1. jQuery实现左移右移

    <html> <head> <meta charset="utf-8"> <title>完成左移右移</title> & ...

  2. JS & JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  3. select多选左移右移的实现

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. 初识 jquery.simulate.js 模拟键盘事件

    用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...

  5. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  6. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  7. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  8. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  9. 【转】jquery.cookie.js的使用

    Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是 ...

随机推荐

  1. javascript继承—继承的实现原理(1)

    原文:javascript继承-继承的实现原理(1) 打算针对js的继承写一系列文章,详细的分析js里继承原理,实现方式,各种继承方式的优缺点,以及最优继承方案,还有多继承的问题等…. 面向对象的编程 ...

  2. CentOS-6.5-x86_64 最小化安装,已安装包的总数,这些包?

    一.我们怎么知道有多少的包被安装? [root@localhost ~]# rpm -qa | wc -l 217 二.怎样得知安装了那些软件包? [root@localhost ~]# rpm -q ...

  3. 编程算法 - 第一个仅仅出现一次的字符 代码(C)

    第一个仅仅出现一次的字符 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 在字符串中找出第一个仅仅出现一次的字符. 字符是char类型, 所以匹 ...

  4. struts2 模型分配问题和延迟加载问题

    傅型号值问题: 首先须要说明的是:Action在请求到达ActionProxy时已经创建出来了,而且对应的创建了一个值栈. 在拦截器到达之前这个图片已经OK了.Action已经创建.并且压入了值栈vs ...

  5. 几个常用的CSS3样式代码以及不兼容的解决办法

    原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radiu ...

  6. Appium Server源码分析之作为Bootstrap客户端

    Appium Server拥有两个主要的功能: 它是个http服务器,它专门接收从客户端通过基于http的REST协议发送过来的命令 他是bootstrap客户端:它接收到客户端的命令后,需要想办法把 ...

  7. 使用Scala操作Mongodb

    介绍 Scala是一种功能性面向对象语言.它融汇了很多前所未有的特性.而同一时候又执行于JVM之上.随着开发人员对Scala的兴趣日增,以及越来越多的工具支持,无疑Scala语言将成为你手上一件不可缺 ...

  8. .NET的DTO映射工具AutoMapper

    .NET的DTO映射工具AutoMapper 原文:https://github.com/AutoMapper/AutoMapper/wiki/Getting-started 参考:http://ww ...

  9. Ubuntu12.10无法安装openssh-server[已解决]

    因为要在Ubuntu下搞些东西,家里的台式有Deepin2013,但是发现有很多依赖的问题,实在不想解决,就到win7下用VBox安装了Ubuntu.打算使用SourceCRT连接虚拟机,但是在安装在 ...

  10. 探秘IntelliJ IDEA 13中的版本控制——Subversion 1.8

    IntelliJ IDEA 中引入的重要特性就是版本控制,而在IntelliJ IDEA 13中的体现便是支持最新的Subversion 1.8. 相对于之前版本对Subversion的支持,Subv ...