<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. webots自学笔记（一）软件界面和简单模型仿真

    本人是某非理工类某高校大四狗,由于毕设研究需要使用webots软件,在学习使用webots的过程花费了很多时间.由于这个软件基本没有什么中文资料,所以想把自己所学到的一些东西写下来,如有什么错误的地方 ...

  2. KoaHub平台基于Node.js开发的Koa EJS渲染插件代码信息详情

    koa-ejs ejs render middleware for koa koa-ejs Koa ejs view render middleware. support all feature of ...

  3. 单源最短路径问题之dijkstra算法

    欢迎探讨,如有错误敬请指正 如需转载,请注明出处 http://www.cnblogs.com/nullzx/ 1. 算法的原理 以源点开始,以源点相连的顶点作为向外延伸的顶点,在所有这些向外延伸的顶 ...

  4. wxWidgets 的 Linux / Windows 混合开发环境

    目标 建立一个开发 GUI 交互界面程序的环境,要求: 以 C/C++ 为主要程序设计语言. 最好能充分利用已有的 MFC 开发经验. 以 Linux 为主要开发环境.可以在 Windows 中编译并 ...

  5. IDEA使用心得-----懒得截图了，但是大家应该看得懂

    1.界面设置,有白色和 黑色风格两种,我个人喜欢黑色风格,护眼最重要的是看着帅. 设置方法:FILE--Settings--Editor--Colors&Fonts--Scheme name ...

  6. Untiy文档总结（1）-Profiling

    这段时间上班了,不是什么大公司,虽说很闲但是不能断了学习,就开始看优化有关的文档,虽说自己英语渣的要死,但也要读下去,逼着自己翻译完了,里面有抄Unity圣典的,但自己是看Unity5.5文档写的,只 ...

  7. Docker remote API简单配置使用

    1.启动docker remote API的方式如下: docker -d -H uninx:///var/run/docker.sock -H tcp://0.0.0.0:5678 2.但是为了伴随 ...

  8. JS-DOM . 01 简单了解DOM

    DOM概述 html加载完毕,渲染引擎会在内存中把html文档生成一个DOM树,getElementById是获取内DOM上的元素,然后操作的时候修改的是该元素的属性 体验事件/事件三要素1.事件源( ...

  9. ThinkPHP3.2.3版本验证码异步第二次验证时失败的问题解决

    最近在用TP3.2.3做一个小项目,纠结于验证码验证问题,重点在于二次验证,举个例子就是常见的登录页面上有个验证码输入框,当用户输入验证码并且鼠标点击在这个输入框之外时候,触发onblur事件,然后a ...

  10. vue学习笔记 计算属性（四）

    计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...