<table>
<tr>
<td>
<select multiple="multiple" id="leftSelect">
<optgroup label="可选择">
<option value="1">1111</option>
<option value="2">2222</option>
<option value="3">3333</option>
<option value="4">4444</option>
</optgroup>
</select>
</td>
<td>
<span href="javascript:;" class="moveBtn" from="#leftSelect" to="#rightSelect">右移</span>
<br />
<br />
<span href="javascript:;" class="moveBtn" from="#rightSelect" to="#leftSelect">左移</span>
</td>
<td>
<select multiple="multiple" id="rightSelect">
<optgroup label="可用"></optgroup>
</select>
</td>
</tr>
</table>
 <script>
$(function () {
$(".moveBtn").click(function () {
var from = $($(this).attr("from"));
var to = $($(this).attr("to"));
var selected = from.find(":selected").attr("selected", false).toArray();
var option = to.find("option").toArray();
var arr = selected.concat(option).sort(function (a, b) { return a.value - b.value });
to.find("optgroup").append(arr);
});
});
</script>

两个select转移的更多相关文章

  1. jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)

    jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val();  //选择被选中Radio的Val ...

  2. oracle中,将两个select语句的结果作为一个整体显示出来

    如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来.union和union ...

  3. 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)

    1.两个select 内容互换 <!DOCTYPE html><html>    <head>        <meta charset="UTF- ...

  4. Mongodb 5节点异地两中心故障转移恢复测试案例

    Mongodb5节点异地两中心故障转移恢复测试案例 架构方式:5节点,主中心(2数据1仲裁),备中心(1数据1仲裁) 1基本情况 操作系统:Red Hat Enterprise Linux Serve ...

  5. Mysql中两个select语句的连接

    Mysql中两个select语句连接需要用到操作符 SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥 ...

  6. 两个Select 之间的值的传递

    运行效果: 下面是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML ...

  7. SQL语句里合并两个select查询结果

    SQL UNION 操作符UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 ...

  8. jQuery:实现两个<select>控件的互移操作

    一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  9. 两个select 左右添加,上下移动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 【POJ 1789】Truck History(最小生成树)

    题意:距离定义为两个字符串的不同字符的位置个数.然后求出最小生成树. #include <algorithm> #include <cstdio> #include <c ...

  2. 改变Yii2的默认路由

    修改配置文件 return [ 'name'=>'AA后台', 'id' => 'app-backend', 'defaultRoute'=>'shop/index',//路由 …… ...

  3. OPRNGL总结(一)OPENGL的理论原理

    1.计算机图形学的发展——走向3D 1.纸带 2.荧光屏,打印出*等等 3.阴极射线管 4实时3D 2.实现“3D”的原理 1.其实现在看到的3D都是伪3D,并不是真正的三维图像,真正的三维图像 真3 ...

  4. IIS配置错误信息输出

    Asp.net: 一.通过 IIS 配置 1.打开IIS管理器,或按住 WIN + R 打开命令行输入 inetmgr 打开 IIS 管理 2.左边目录选择目标站点,在右边 IIS 块中双击 “错误页 ...

  5. editGrid分录表格

    waf("分录id").wafGrid("setCellEditorAllConfig", "字段名", "filteritem& ...

  6. bos启动56898服务器配置界面报错

    //文件路径 /easweb/runtime/server/deploy/portal.ear/portal.war/WEB-INF/config/spring/applicationContext- ...

  7. hibernate基础增删查改简单实例

    hibernate 基础理论知识网上很多,可以百度和google.这里不做多的介绍,以一个User表来开展例子 建一个web-project 我这里用了junit单元测试环境来进行增删查改的测试,别的 ...

  8. MooseFs-分布式文件系统系列(二)之安装总结

    preface 上篇博客写了如何安装MFS,那么现在就说说经验总结把 安装方式有源码和yum安装,在官网地址:https://moosefs.com/download/centosfedorarhel ...

  9. Docker入门教程(七)Docker API

    Docker入门教程(七)Docker API [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第七篇,重点介绍了Docker Registry API和 ...

  10. django rest framework

    Django-Rest-Framework 教程: 4. 验证和权限 作者: Desmond Chen, 发布日期: 2014-06-01, 修改日期: 2014-06-02 到目前为止, 我们的AP ...