<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. JQuery触发radio或checkbox的change事件

    在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了 ...

  2. js checkbox获取选中的值

    //将选择标签 var addCode = function () { var codes = []; var elements = document.getElementsByName(" ...

  3. IOS URL 编码和解码

    1.url编码 ios中http请求遇到汉字的时候,需要转化成UTF-8,用到的方法是: NSString * encodingString = [urlString stringByAddingPe ...

  4. Reveal使用步骤

    一.Reveal使用步骤 1.启动Reveal --> Help --> Show Reveal Library in Finder,拖动添加Reveal.framework到工程中. 选 ...

  5. AJAX-初学AJAX本地环境配置

    1.前段时间学习headfirst AJAX,发现有些概念比较陌生,理解起来比较困难,等看完了半本的JavaScript高级程序设计,再回头看这本AJAX,发现轻松了很多,但是遇到了一个问题,AJAX ...

  6. 【bzoj2730】 HNOI2012—矿场搭建

    http://www.lydsy.com/JudgeOnline/problem.php?id=2730 (题目链接) 题意 给出一张图,问如果删掉其中一个点,使得其他每个节点都有一个安全撤离的出口, ...

  7. JQuery实现页面刷新滚动条自动滚动到特定位置

    var cotentOffset = $('#6f').offset(); $('.info_box').animate({ scrollLeft: cotentOffset.left }, ); 原 ...

  8. Nginx 日志分享

    Nginx 日志对于大部分人来说是个未被发掘的宝藏,总结之前做某日志分析系统的经验,和大家分享一下 Nginx 日志的纯手工分析方式. Nginx 日志相关配置有 2 个地方:access_log 和 ...

  9. SPOJ GSS4 Can you answer these queries IV

    Time Limit: 500MS   Memory Limit: 1572864KB   64bit IO Format: %lld & %llu Description You are g ...

  10. crawler: 常用的一些工具

    phantomjs, Headless的WebKit Driver,意味着可以无需GUI,完全模拟Chrome/Safari的操作. casperjs(基于phantomjs的好用封装),zombie ...