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 相关文章推荐
JQuery 常用方法基础教程
Feb 06 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
关于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获取mysql数据库中的所有表名的代码
2011/04/23 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
实例讲解python函数式编程
2014/06/09 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
总裁助理岗位职责
2014/02/17 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers