<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. js 客户端如何判断浏览器是否暗转Flash

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. Redis集合-Set

    sadd 向一个Set中添加数据 127.0.0.1:6379> sadd set01 1 1 2 2 3 3 (integer) 3127.0.0.1:6379> SMEMBERS se ...

  3. bzoj1104: [POI2007]洪水pow

    #include <iostream> #include <cstdio> #include <cmath> #include <cstring> #i ...

  4. XHTML与HTML的区别

    XHTML:可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格. 参考:http://baike.baidu.com/search/word?word= ...

  5. asp.net下webform的ReadOnly和Enabled属性最终渲染的结果

    ReadOnly对应readonly="readonly" Enabled对应disabled="disabled" 然后研究了一下这两种的用法,特此标记一下: ...

  6. NAT功能的研究

    通俗的话:现在大部分的家用路由器都是这个功能,一个公网IP的拨号网络,然后地下全部电脑都可以用这个IP上网,进行数据转发,这就是NAT. 参考:http://baike.baidu.com/link? ...

  7. CMMI3标准文档模板大全

    链接:http://pan.baidu.com/s/1c2cGX8W 密码:ulns

  8. struts2 CVE-2013-2251 S2-016 action、redirect code injection remote command execution

    catalog . Description . Effected Scope . Exploit Analysis . Principle Of Vulnerability . Patch Fix 1 ...

  9. grid列的值格式化

    //列格式化 waf.defineCustomeClass("cellformatter.ratioFomatter", cellformatter.defaultFormatte ...

  10. MOOCULUS微积分-2: 数列与级数学习笔记 5. Another comparison test

    此课程(MOOCULUS-2 "Sequences and Series")由Ohio State University于2014年在Coursera平台讲授. PDF格式教材下载 ...