<!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. k8s部署rocketmq 双主

    由于apache 官网的 docker image 是单点,要实现集群方式部署. rocketmq 分为 nameserver 和 broker , 对于之间调用频繁的服务,会增加网络压力, 所以 考 ...

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

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

  3. Qt 编程指南10 QImage Mat QPixmap转换

      //示例 pushButtonOpenPicBig按钮clicked单击动作触发 void Qt_Window::on_pushButtonOpenPicBig_clicked() { strin ...

  4. mysql数据库的test类型

    文章参考自 window系统参考:http://blog.sina.com.cn/s/blog_46f7bb6d0102vde3.html linux 参考:http://www.linuxeye.c ...

  5. Vue 改变数组中对象的属性不重新渲染View的解决方案

    Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...

  6. mysql试题

    drop,delete与truncate的区别:优先级: drop > truncate > deleteTRUNCATE 按行删除并不把删除操作记录记入日志保存(不可恢复)DELETE ...

  7. Redis 参数说明

    4. Redis的配置 4.1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 4.2. 当Redis以守护进程方式运行时,Redis ...

  8. TCP/IP协议---广播和多播及IGMP协议

    老板找某个高层谈话,这是一对一形式.当老板叫来所有高层谈话,那么就变为了一对多.计算机网络中也是如此,当一个主机需要和更多机器对话时,就有了广播和多播这种形式. 广播和多播仅应用于UDP,它们对需将报 ...

  9. 3.3《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——less即more

    Unix提供了两个工具查看不止文件的头部和尾部.这个功能程序叫做more,但有种更强大的变异体叫做less(起初我认为这是玩笑).less这个程序是交互性地,所以很难在输出时捕获,但是仍然为大家提供了 ...

  10. 【强化学习】python 实现 q-learning 迷宫通用模板

    本文作者:hhh5460 本文地址:https://www.cnblogs.com/hhh5460/p/10145797.html 0.说明 这里提供了二维迷宫问题的一个比较通用的模板,拿到后需要修改 ...