<!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. spring 基于注解的@Scheduled和quartz定时器两种实现

    一.使用quartz 1.由于我的项目jar包使用的maven托管的,在pom文件中加入quartz的依赖就可以 2.配置quartz-context.xml,确保xml文件能被加载到 <?xm ...

  2. PAT A1133 Splitting A Linked List （25 分）——链表

    Given a singly linked list, you are supposed to rearrange its elements so that all the negative valu ...

  3. AI 正则化

    正则化,是减少泛化误差的技术.

  4. windows7系统下配置开发环境 python2.7+pyqt4+pycharm

    python2.7 链接:https://pan.baidu.com/s/1lPI9AF9GCaakLXsMZLd5mQ 提取码:5xt6 pip 链接:https://pan.baidu.com/s ...

  5. docker镜像的创建commit及dockerfile

    在docker 1.3版本以前使用attach进入容器会经常出现卡死的情况,之后官方退出了exec命令,从宿主机进入,但是从其他远程主机进入使用ssh服务来维护是用户熟悉的方法.所以这里来创建一个带有 ...

  6. Luogu3702 SDOI2017 序列计数 矩阵DP

    传送门 不考虑质数的条件,可以考虑到一个很明显的$DP:$设$f_{i,j}$表示选$i$个数,和$mod\ p=j$的方案数,显然是可以矩阵优化$DP$的. 而且转移矩阵是循环矩阵,所以可以只用第一 ...

  7. WPF C#仿ios 安卓 红点消息提示

    原文:WPF C#仿ios 安卓 红点消息提示 先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...

  8. item 4: 知道怎么去看推导的类型

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 对于推导类型结果的查看,根据不同的软件开发阶段,你想知道的信息的不 ...

  9. 阿里云OSS下载pdf文件,并在pdf文件上添加水印

    代码: 兵马未动,粮草先行 作者: 传说中的汽水枪 如有错误,请留言指正,欢迎一起探讨. 转载请注明出处. 公司要求从阿里云OSS下载pdf文件并且需要添加水印. 因此这里总结一下. 首先添加了一个F ...

  10. 第六周-总结&结对编程

    1.结对编程 结对编程的Partner依旧是郑蕊师姐(博客:http://www.cnblogs.com/zhengrui0452/) 我们一起改进的是郑蕊师姐做的“四则运算” 郑蕊师姐之前完成四则运 ...