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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
vue v-model动态生成详解
Jun 30 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 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添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
python如何判断IP地址合法性
2020/04/05 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
物流经理自我评价
2013/09/23 职场文书
给全校老师的建议书
2014/03/13 职场文书
企业宣传策划方案
2014/05/29 职场文书
生日宴会策划方案
2014/06/03 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书