jQuery实现可移动选项的左右下拉列表示例


Posted in Javascript onDecember 26, 2016

本文实例讲述了jQuery实现可移动选项的左右下拉列表。分享给大家供大家参考,具体如下:

运行效果图如下:

jQuery实现可移动选项的左右下拉列表示例

完整代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
BODY
{
  font-family:"Courier";
  font-size: 12px;
  margin:0px auto;
  /*不显示 横纵向 滚动条*/
  overflow-x:no;
  overflow-y:no;
  background-color: #B8D3F4;
}
td
{
  font-size:12px;
}
.default_input
{
  border:1px solid #666666;
  height:18px;
  font-size:12px;
}
.default_input2
{
  border:1px solid #666666;
  height:18px;
  font-size:12px;
}
.nowrite_input
{
  border:1px solid #849EB5;
  height:18px;
  font-size:12px;
  background-color:#EBEAE7;
  color: #9E9A9E;
}
.default_list
{
  font-size:12px;
 border:1px solid #849EB5;
}
.default_textarea
{
  font-size:12px;
  border:1px solid #849EB5;
}
.nowrite_textarea
{
  border:1px solid #849EB5;
  font-size:12px;
  background-color:#EBEAE7;
  color: #9E9A9E;
}
.wordtd5 {
  font-size: 12px;
  text-align: center;
  vertical-align:top;
  padding-top: 6px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 5px;
  background-color: #b8c4f4;
}
.wordtd {
  font-size: 12px;
  text-align: left;
  vertical-align:top;
  padding-top: 6px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 5px;
  background-color: #b8c4f4;
}
.wordtd_1 {
  font-size: 12px;
  vertical-align:top;
  padding-top: 6px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 5px;
  background-color: #516CD6;
  color:#fff;
}
.wordtd_2{
  font-size: 12px;
  text-align: right;
  vertical-align:top;
  padding-top: 6px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 5px;
  background-color: #64BDF9;
}
.wordtd_3{
  font-size: 12px;
  text-align: right;
  vertical-align:top;
  padding-top: 6px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 5px;
  background-color: #F1DD34;
}
.inputtd
{
  font-size:12px;
  vertical-align:top;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
}
.inputtd2
{
  text-align: center;
  font-size:12px;
  vertical-align:top;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
}
.tablebg
{
  font-size:12px;
}
.tb{
  border-collapse: collapse;
  border: 1px outset #999999;
  background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
    border-right-width:0px;
    border-left-width:0px;
    border-top-width:0px;
    border-bottom-width:1px;}
.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
  border: none;
}
.button {
  /*ridge: 根据border-color的值画菱形边框 */
  border: 1px ridge #ffffff;
  /*行间距 (上下)大小 */
  line-height:18px;
  height: 20px;
  width: 45px;
  padding-top: 0px;
  background:#CBDAF7;
  color:#000000;
  font-size: 9pt;
  font-family:"Courier";
}
.textarea {
  font-family: Arial, Helvetica, sans-serif, "??";
  font-size: 9pt;
  color: #000000;
  border-bottom-width: 1px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid;
  border-left-style: none;
  border-bottom-color: #000000;
  background-color:transparent;
  text-align: left
}
-->
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
 <tr>
  <td width="126">
    <!--multiple="multiple" 能同时选择多个  size="10" 确定下拉选的长度-->
    <select name="first" size="10" multiple="multiple" class="td3" id="first">
     <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>
     <option value="选项8">选项8</option>
    </select>
  </td>
  <td width="69" valign="middle">
    <input name="add" id="add" type="button" class="button" value="-->" />
    <input name="add_all" id="add_all" type="button" class="button" value="==>" />
    <input name="remove" id="remove" type="button" class="button" value="<--" />
    <input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
    </td>
  <td width="127" align="left">
   <select name="second" size="10" multiple="multiple" class="td3" id="second">
     <option value="选项9">选项9</option>
   </select>
  </td>
 </tr>
</table>
</div>
</body>
<script type="text/javascript">
  /**<input name="add" id="add" type="button" class="button" value="-->" /> */
  /**
   * <select name="first" size="10" multiple="multiple" class="td3" id="first">
     <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>
     <option value="选项8">选项8</option>
    </select>
   */
$().ready(function() {
  $("#add").click(function(){
    $("#first option:selected").appendTo($("#second"));
  });
  $("#add_all").click(function() {
    $("#first option").appendTo($("#second"));
  });
  $("#first").dblclick(function(){
    $("#first option:selected").appendTo($("#second"));
  });
  $("#remove").click(function() {
    $("#second option:selected").appendTo($("#first"));
  });
  $("#remove_all").click(function() {
    $("#second option").appendTo($("#first"));
  });
});
</script>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 #Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 #Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 #Javascript
原生JS实现图片轮播效果
Dec 26 #Javascript
输入框点击时边框变色效果的实现方法
Dec 26 #Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 #Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 #Javascript
You might like
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php备份数据库类分享
2015/04/14 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
Python中的TCP socket写法示例
2018/05/11 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技