<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. C++游戏服务器的性能优化

    以下只是某次项目的一次经历,最终并没有按照这样的方案来优化,但对思路方面确实是一个提高,所以记录在此. ------------------------------------------------ ...

  2. Pow(x, n) leetcode

    Implement pow(x, n). Subscribe to see which companies asked this question 利用依次消去二进制位上的1,来进行计算 double ...

  3. Mditor 发布「桌面版」了 - http://mditor.com

    简单说明 Mditor 最早只有「组件版」,随着「桌面版」的发布,Mditor 目前有两个版本: 可嵌入到任意 Web 应用的 Embed 版本,这是一桌面版的基础,Repo: https://git ...

  4. Uri API

    四中LaunchMode:http://blog.csdn.net/liuhe688/article/details/6754323 onNewIntent:http://www.cnblogs.co ...

  5. 消息队列-ActiveMQ

    1 业务需求描述 举例描述: 再警情通报的业务时通过发送消息界面可以选择 警情联络,和船情通报两种消息 发送方式可分为 一对一发送:部门对部门.个人对个人 一对多发送:部门对多部门.个人对多人 2 功 ...

  6. Git环境搭建以及上传到GitHub全文记录

    1.百度搜索下载git,官网可能很慢,我在百度软件里面下载的.当然可能不是最新版本.一路回车安装就好. 2.设置本机git的用户名和邮箱地址 查看当前电脑是否设置了用户名称 $ git config ...

  7. C++ Primer 5 CH1 开始

    1.1 编写一个简单的C++程序 在大多数系统中,main 的返回值被用来指示状态.返回值 0 表示成功,非 0 的返回值的含义由系统定义,通常用来指出错误类型. 访问 main 的返回值的方法依赖于 ...

  8. scanf函数之扫描集

    前言 %[]是scanf函数不常用到的格式字符--扫描集(scanset),它的用法很简单,但却能巧妙地解决一些输入问题.(由于书籍里和网上对此格式字符的介绍很少且篇幅较小,本文可能会有些许错误,请读 ...

  9. mvp架构解析

    MVP现在已经是目前最火的架构,很多的框架都是以MVP为基础,甚至于Google自己都出一个MVP的开源架构.https://github.com/googlesamples/android-arch ...

  10. JavaWeb之多语言国际化

    这周打算把国际化.JDBC和XML学习一下,从下周就开始学习三大框架,再坚持一个半月吧就能入门JavaWeb了,上周周末两天过的真是生不如死,两天坐在家里,醒来就写博客,原本在公司也自己操作了一遍,其 ...