<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. Java程序员入门：程序员究竟可以干多少年？

    很多人都说程序员是青春饭,只能干到30岁. 然而事实真的如此么? 今天我们来探讨一下这个老话题,看看为了技术与编程执着究竟能走多远? 01年龄分布图 先来看一下程序员的年龄分布图: 我们可以看到程序员 ...

  2. maven构建maven-project和maven-module

    在Eclipse中创建Maven多模块工程的例子 更多0   如果,你需要创建多个项目,项目之间即独立又有关系,那么创建一个Maven多模块项目是个非常好的选择,也非常cool!怎么在Eclipse里 ...

  3. v3学院带您一起学习FPGA

    本文为原创,转载请注明! 课程名称:双buffer乒乓操作项目概况:使用FPGA内部ram作为缓冲器,实现对外部数据流的缓存:为了提升数据的传输及处理速度,在此节课中将用到两个ram进行乒乓操作.结构 ...

  4. ios8指纹识别

    简介 苹果从iPhone5S开始,具有指纹识别技术,从iOS8.0之后苹果允许第三方 App 使用 Touch ID进行身份验证.指纹识别Touch ID提供3+2共5次指纹识别机会(3次识别失败后, ...

  5. PHP无锁内存nosql---Yac的实战

    无锁内存nosql---Yac的实战 最近在工作使用了yac,所以比较了下Memcache和Yac的高并发读写性能测试,发现Yac要比Memcache快很多(这里没有比较Yac和Apc的性能情况, 不 ...

  6. WCF请求数据:已超过传入消息(65536)的最大消息大小配额。若要增加配额，请使用相应绑定元素上的 MaxReceivedMessageSize 属性。

    通常情况下,写好WCF服务后都会用自带的WCFClient工具进行测试,在进行时数据请求的时候,如果返回数据量超过默认接收值的时候就会提示如图异常错误. 错误也提示的很清楚,无非就是修改接收值大小的问 ...

  7. View 的measure 和onMeasure

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #454545 } p.p2 ...

  8. 一文让你从此告别HTTP乱码（一）Request篇

    #circle { background-color: #8fcbec; border: 3px } 概述 开发Web项目的过程中,经常遇到浏览器中显示的内容乱码,或者服务器获取浏览器请求参数时乱码的 ...

  9. redis 3.2 报错 Redis protected-mode 配置文件没有真正启动

    (error) DENIED Redis is running in protected mode because protected mode is enabled Redis protected- ...

  10. 微服务--webapi实现，脱离iis，脱离tomcat

    前言 微服务,顾名思义就是微小的单一的服务程序,单一流程,单一发布,开发和部署都可独立: 这是我的理解: 但基于web的服务,不管是webservice还是webapi等类似的服务都需要基于iis或者 ...