<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. JavaScript设计模式之构造器、模块和原型

    JavaScript面向对象 JavaScript是一种无类语言,但可以使用函数来模拟,这就涉及到设计模式.模式是一种已经验证过的可复用的解决方案,可用于解决软件设计中遇到的常见的问题,通常将这些解决 ...

  2. C语言学习心得

    最近学习了C语言,打脑壳,很多东西不会用,没有概念,单点知识都懂,组合起来就不知道怎么弄了.慢慢来吧

  3. java基础：输出数组中指定位置的数据

  4. Java豆瓣电影爬虫——模拟登录的前世今生与验证码的爱恨情仇

    前言 并不是所有的网站都能够敞开心扉让你看个透彻,它们总要给你出些难题让你觉得有些东西是来之不易的,往往,这也更加激发你的激情和斗志! 从<为了媳妇的一张号,我与百度医生杠上了>里就有网友 ...

  5. 需要接入的SDK包，一定要用最新版，否则后果很严重

    ios8更新后,原来的静态库不支持.导致一个bug连续测试好多天都没结果.

  6. ３－１5　JS基础知识02

    一.For循环: For (var i = 0;  i <= 10;  i++){ 循环体: } 注意:For循环中的表达式是可以省略的,省略以后是个死循环. odd:奇数   even : 偶 ...

  7. 在WPF应用程序中使用Font Awesome图标

    Font Awesome 在网站开发中,经常用到.今天介绍如何在WPF应用程序中使用Font Awesome . 如果是自定义的图标字体,使用方法相同. 下载图标字体 在官方网站或github上下载资 ...

  8. ###服务（Service）

    Start服务开启方式 1)   创建服务 public class MyService extends Service 2)   添加注册表 <service android:name=&qu ...

  9. windows phone 8.1 FlipView 实现照片自动浏览

    FlipView 控件也是一个集合控件,不过它和ListView等控件不同,ListView控件是一次显示多个项,而FlipView则是每次只显示一个项.在windows phone上通过默认的左右滑 ...

  10. iOS开发之NSObject的多线程

    1.NSObject的多线程方法(用的时候要用@autoreleasepool{}包起来) 开启后台执行任务的方法: - (void)performSelectorInBackground:(SEL) ...