<head>
<meta charset="utf-8" />
<title>select_option移动</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.all {
width: 100%;
height: 200px;
}
.select_1 {
float: left;
width: 100px;
height: 200px;
}
.select_2 {
float: left;
width: 100px;
height: 200px;
}
.btn {
float: left;
width: 66px;
height: 200px;
margin-top: 100px;
}
.btn button {
margin-top: 20px;
width: 66px;
height: 20px;
}
</style>
</head>

<body>
<div class="all">

<div style="height: 200px; width: 10%; float: left; margin-left: 100px; margin-top: 100px;">
<select class="select_1" multiple="multiple">
<option value="opt1">选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
<option>选项六</option>
</select>
</div>

<div class="btn">
<button class="btn1">选中的></button>
<button class="btn2">全部>></button>
<button class="btn3">选中的<</button>
<button class="btn4">全部<<</button>
</div>

<div style="height: 200px; width: 10%; float: left; margin-left: 30px; margin-top: 100px;">
<select class="select_2" multiple="multiple"></select>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
$(function() {
$('.btn1').click(function() {
$('.select_1>option:selected').appendTo('.select_2');
})
$('.btn2').click(function() {
$('.select_1 option').appendTo('.select_2');
})
$('.btn3').click(function() {
$('.select_2>option:selected').appendTo('.select_1');
})
$('.btn4').click(function() {
$('.select_2 option').appendTo('.select_1');
})
})
</script>

JQ实现选中以后就左右移动的更多相关文章

  1. JQ获取选中select 标签的值

    Jq://#ses为select 标签的Id$("#ses option:selected").val(); $("#ses option:selected") ...

  2. jQ如何选中被选中的单选按钮的值

    alert($("label input[name=logintpye]:checked").val());

  3. js中的new Option默认选中

    new Option("文本","值",true,true).后面两个true分别表示默认被选中和有效! //js默认选中 var sel = document ...

  4. jQuery 选择器选中某节点，在后续的链式操作函数内使用 $(this) 的结果是 Window 对象，而非该节点对象

    <ul class="tree-ocx"> <li class="tree-ocx-li" data-displayed="fals ...

  5. easyui源码翻译1.32--TimeSpinner（时间微调）

    前言 扩展自$.fn.spinner.defaults.使用$.fn.timespinner.defaults重写默认值对象.下载该插件翻译源码 时间微调组件的创建基于微调组件.它和数字微调类似,但是 ...

  6. echarts设置toolTip大小和样式问题

    最近研究echarts,发现提示框太大,位置不合适问题, 用jq,css选中div的tooltip设置大小有时候不管用: 查了官网文档 http://echarts.baidu.com/option. ...

  7. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  8. jq 操作radio，设置选中、获取选中值

    <label><input type="radio" name="sex" value="1">男</labe ...

  9. JQ 获取单选按钮选中的值

    ==========================html 代码 <input type="radio" style="float: left " on ...

随机推荐

  1. Linux下随机生成密码的命令总结

    有时候经常为如何设置一个安全.符合密码复杂度的密码而绞尽脑汁,说实话,这实在是一个体力活而且浪费时间,更重要的是设置密码的时候经常纠结.终于有一天实在忍不住了,于是学习.整理了一下如何使用Linux下 ...

  2. 每天一个Linux命令 8

    yum 光盘yum源搭建好处:不需要上网,省去许多网络yum源下载所需的时间,安装速度会大大增加.缺点:yum源不一定是最新的 1.打开虚拟机,加载光盘镜像,进入Linux系统,挂载光盘.2. 让网络 ...

  3. java异常详解

    java异常需要弄清楚如下几个问题: 1.java异常的层次结构 2.搞清楚问题:java中异常抛出后代码还会继续执行吗? 答:该问题可以参考该博文,完美的回答了我的疑惑:http://www.cnb ...

  4. js实现ajax的post请求步骤

    post请求步骤与前篇的get请求步骤差别不大,只是增加了 xhr.setRequestHeader("Content-type","application/x-www- ...

  5. CSS规范 - 命名规则

    使用类选择器,放弃ID选择器 ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用. NEC特殊字符:"-"连字符 "-"在本规范中并不表示连 ...

  6. golang mutex互斥锁分析

    互斥锁:没有读锁写锁之分,同一时刻,只能有一个gorutine获取一把锁 数据结构设计: type Mutex struct { state int32 // 将一个32位整数拆分为 当前阻塞的gor ...

  7. java学习笔记 --- 异常

    异常 (1)程序出现的不正常的情况. (2)异常的体系   Throwable    |--Error  错误,严重问题,我们不处理.    ·    |--Exception 异常     |--R ...

  8. unity3d屏蔽Windows10输入法

    在win10上,如果安装了某些输入法(比如QQ输入法),会造成unity的键盘事件被输入法捕获而不能触发的情况.只有将输入法切换到英文状态下才能响应键盘事件. 解决办法有, 1:用户主动切换输入法,甚 ...

  9. xlrd的使用详细介绍以及基于Excel数据参数化实例详解

    1.安装xlrd xlrd是python用于读取excel的第三方扩展包,所以在使用xlrd前,需要使用以下命令来安装xlrd.pip install xlrd 在使用这个命令之前先确定自己有没有安装 ...

  10. 第4章Zabbix监控实践

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; t ...