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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
js 操作select相关方法函数
Dec 06 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
Vue实现移动端拖拽交换位置
Jul 29 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
一个ubbcode的函数,速度很快.
2006/10/09 PHP
利用PHP动态生成VRML网页
2006/10/09 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
python3 简单实现组合设计模式
2020/07/02 Python
python利用opencv保存、播放视频
2020/11/02 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
C语言编程题
2015/03/09 面试题
后勤岗位职责
2013/11/26 职场文书
班组长工作职责
2013/12/25 职场文书
行政助理工作职责范本
2014/03/04 职场文书
感恩的演讲稿
2014/05/06 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
高考学习决心书
2015/02/04 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python