jQuery实现可移动选项的左右下拉列表示例_网络技术

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

发布时间 - 2026-01-10 22:06:42 点击率：次

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

# jQuery # 可移动 # 选项 # 下拉列表 # jquery select多选框的左右移动具体实现代码 # jQuery实现左右两个列表框的内容相互移动功能示例 # jquery实现列表上下移动功能 # jquery移动点击的项目到列表最顶端的方法 # jQuery实现用方向键控制层的上下左右移动 # jQuery让控件左右移动的三种实现方法 # jQuery slider Content(左右控制移动) # jQuery实现下拉框左右移动（全部移动 # 已选移动） # 基于jquery实现左右上下移动效果 # Jquery实现多选下拉列表左右移动 # 行间 # 相关内容 # 多个 # 感兴趣 # 给大家 # 更多关于 # 所述 # 程序设计 # 无标题文档 # 滚动条 # 拖拽 # 操作技巧 # 选择器 # 讲述了 # nowrite_input # default_textarea # nowrite_textarea # E9A9E # default_list # td

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：虚假网站怎么制作的,投诉恶意网站最好的方法？

下一篇：Python日志级别设计_信息分类解析【教程】

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：虚假网站怎么制作的,投诉恶意网站最好的方法？

下一篇：Python日志级别设计_信息分类解析【教程】