<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
 <style>

   .centent{
   float:left;
   margin-right: 50px;
  }
 </style>
</head>
<body>
<div class="centent">
 <select multiple id="select1" style="width: 100px;height:160px ">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
  <option value="5">选项5</option>
  <option value="6">选项6</option>
  <option value="7">选项7</option>
 </select>
 <div>
  <p id="add">选中添加到右边&gt;&gt;</p>
  <p id="add_all">全部添加到右边&gt;&gt;</p>
 </div>
</div>
<div class="centent">
 <select multiple id="select2" style="width: 100px;height:160px ">
 </select>
 <div>
  <p id="remove">&lt;&lt;选中删除到左边</p>
  <p id="remove_all">&lt;&lt;全部删除到左边</p>
 </div>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
 $('#add').click(function(){
  var $options=$('#select1 option:selected');
  $options.appendTo('#select2');
 });
 $('#add_all').click(function(){
  var $options=$('#select1 option');
  $options.appendTo('#select2');
 });
 $('#select1').dblclick(function(){
  var $options=$("option:selected",this);
  $options.appendTo('#select2');
 });
 $('#remove').click(function(){
  var $options=$('#select2 option:selected');
  $options.appendTo('#select1');
 });
 $('#remove_all').click(function(){
  var $options=$('#select2 option');
  $options.appendTo('#select1');
 });
 $('#select2').dblclick(function(){
  var $options=$("option:selected",this);
  $options.appendTo('#select1');
 });
</script>
</html>

Jquery 组 表单select交互选项的更多相关文章

  1. Jquery 组 表单验证

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  2. form表单select的选项值选择

    html: <form action=""> <p>选择城市</p> <p> <select name="" ...

  3. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  4. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  5. （四）Jquery Mobile表单

    Jquery Mobile表单与列表 一.JM表单      1.表单      普通html表单            效果:          2.只能输入数字的表单           效果:  ...

  6. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  7. html基本标签表单实现交互原理，单选框，复选框，下拉框介绍

    表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...

  8. 通过AJAX和PHP，提交JQuery Mobile表单

    File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...

  9. 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

随机推荐

  1. Arduino IDE for ESP8266 项目（3）创建AP+STA

    官网API:http://arduino-esp8266.readthedocs.io/en/latest/esp8266wifi/readme.html STA (客户端)手机连接路由器 S1 *简 ...

  2. Arduino IDE for ESP8266 项目（2）wifi扫描

    #include "ESP8266WiFi.h" void setup() { Serial.begin(115200); //设定WiFi为STA模式,如果先前已连接上AP,则与 ...

  3. python3 列表的赋值和深浅拷贝

    '''列表赋值:不会创建新对象两个列表的内存地址一样'''# lst1 = ["apple", "banana", ["blueberry" ...

  4. day04流程控制之while

    while语法: while 条件:  缩进的循环体 # 如果条件为真,那么循环体则执行,执行完毕后再次循环,重新判断条件. # 如果条件为假,那么循环体不执行,循环终止 示例一: "&qu ...

  5. mysql数据类型介绍(含text,longtext,mediumtext说明)

    转自http://m.blog.csdn.net/sipsir/article/details/12343581 转载,文章原连接已经失效,百度快照找到的. MySQL支持大量的列类型,它可以被分为3 ...

  6. ftp、ssh

    ftp.ssh都是网络传输的协议,两者一般用来访问服务器,支持ftp的服务器称为ftp服务器,支持ssh的服务器称为ssh服务器. 说白了就是不同的访问方式,ssh更加安全,有相应的密匙 https: ...

  7. SD-WAN助力解决多云问题

    导读 SD-WAN供应商和云服务供应商之间的合作,有助于跨多个云供应商轻松管理云连接,并创建安全.低延迟的多云环境. 随着SD-WAN成为远程用户访问基于云的应用程序的主要途径,促使越来越多的部署多云 ...

  8. linxu自定义安装及网络配置

    1.VMware及Centos6下载 链接:https://pan.baidu.com/s/1XMgBXA13e2zovijhcyciIA   提取码:5sqg 2.安装VMware:略 3.安装虚拟 ...

  9. 数据库隔离级别深入理解(ORACLE)

    TRANSACTION_READ_UNCOMMITTED 1 这种隔离级别最低,脏读,不可重复读,幻读都会发生,我用的oracle,并没有支持这个级别,不作研究. TRANSACTION_READ_C ...

  10. Rabbitmq-topic演示

    在direct演示里,我们的日志系统实现了可选择性的接收日志.但仍旧有一些限制:不能基于多种标准进路由.在一个完整的日志系统中,我们可能不仅要根据日志的严重级别来接收日志,可能需要基于日志的来源来进行 ...