<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<title>无标题文档</title>
<style type="text/css">
<!--
BODY
{
font-family:Courier;;
font-size: 12px;
margin:0px 0px 0px 0px;
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 {
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">
$(document).ready(function() {
//选中的从左端移到右端
//<input name="add" id="add" type="button" class="button" value="-->" />
$("#add").click(function() {
$("#second").append($("#first option:selected"));
});
//全部的从左端移到右端
//<input name="add_all" id="add_all" type="button" class="button" value="==>" />
$("#add_all").click(function() {
$("#second").append($("#first option"));
});
//双击的左端移到右端
$("#first").dblclick(function() {
$("#second").append($("#first option:selected"));
});
//选中的从右端移到左端
//<input name="remove" id="remove" type="button" class="button" value="<--" />
$("#remove").click(function() {
$("#first").append($("#second option:selected"));
});
//全部的从右端移到左端
// <input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
$("#remove_all").click(function() {
$("#first").append($("#second option"));
});
//双击的右端移到左端
$("#second").dblclick(function() {
$("#first").append($("#second option:selected"));
});
});
</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>
</html>
分享到：
相关推荐
在本篇教程中，我们将深入探讨如何利用jQuery库来实现一个功能丰富的下拉列表左右选择交互。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得前端开发变得更加高效和便捷。本章节...
这个名为"jQuery多级下拉菜单支持多级下拉列表菜单"的资源，就是专门为商城网站或企业网站设计的一种实现方式。 jQuery多级下拉菜单的核心在于利用CSS样式定义菜单结构，然后通过jQuery的事件监听和DOM操作来控制...
在这个场景中，我们将讨论如何使用jQuery实现级联下拉列表。 首先，我们需要理解`$().related`这个函数是jQuery的一个插件方法，它用于创建级联效果。在描述中给出的示例代码`$().related({S1:"s1", S2:"s2", S3:...
通过以上步骤，我们可以创建一个功能完备且具有平滑动画效果的jQuery下拉导航菜单。这个菜单在大屏幕设备上通过鼠标悬停展开，在小屏幕设备上则通过点击来切换。在实际项目中，可以根据具体需求进行调整和优化，确保...
本知识点将详细讲解如何使用jQuery创建一个基于div的下拉框，实现下拉列表的功能。 首先，理解jQuery的核心概念。jQuery通过选择器选中DOM元素，然后对这些元素进行操作。例如，`$("#myDiv")`会选中ID为"myDiv"的...
本教程将详细介绍如何使用JavaScript库JQuery来创建一个简单的横向或纵向下拉菜单。 首先，我们需要理解JQuery的基本用法。JQuery是一个轻量级、功能丰富的JavaScript库，它简化了DOM操作、事件处理以及AJAX交互。...
总的来说，这个"jquery下拉多级树选择插件"提供了高效的数据选择和管理工具，其模糊搜索和左右移动功能使得操作更加直观和灵活，对于提高用户在处理复杂数据时的效率具有显著作用。开发者可以通过理解和定制这款插件...
总的来说，"jQuery手机移动端下拉列表选择代码"是一个旨在提升移动设备上选择列表用户体验的解决方案。它利用jQuery的强大功能，结合现代前端开发最佳实践，提供了美观、易用且高性能的下拉列表组件。在开发移动端...
4. **移动选项**：根据需求，将选中项从一个下拉列表移动到另一个。这涉及到`append()`或`prepend()`方法来添加选项，以及可能的`remove()`方法来移除原始位置的选项。 ```javascript if (selectedOption.length >...
jQuery作为一种强大的JavaScript库，提供了简单且高效的API来实现这样的功能。本文将深入探讨如何使用jQuery创建支持多级下拉的菜单，并分析提供的代码。 首先，我们理解jQuery的核心概念：它简化了DOM操作、事件...
总的来说，"jQuery适应移动端选择银行下拉列表"是一个实用的工具，它提高了移动端用户在选择银行列表时的体验，减轻了开发者的负担，让开发者能专注于其他核心功能的实现。通过熟练掌握和应用这类插件，可以提升移动...
在这个"基于jquery实现的自定义风格的下拉列表框.zip"中，我们将探讨如何利用jQuery来创建具有独特视觉样式和交互效果的下拉列表框。 首先，下拉列表框（Dropdown List）是HTML中的元素，通常用于提供一组预设选项...
在提供的"jQuery多级下拉菜单支持多级下拉列表菜单代码"中，你应该会看到这些概念的实现。这个压缩包包含了一个完整的示例，包括HTML、CSS和JavaScript文件，你可以参考这些文件来学习和理解多级下拉菜单的实现。...
`div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
3. **好友分组**：实现好友分组可能需要创建多个列表或使用下拉菜单来选择分组。jQuery可以帮助动态更新这些界面元素，例如，根据用户选择的分组，将好友移动到对应的分组列表。这涉及到了`.detach()`（移除元素但...
在“jquery自动滚动下拉列表框.zip”这个项目中，我们聚焦于一个特定的用户界面元素——下拉列表框，并探讨如何使用jQuery实现自动滚动的效果。这个功能通常用于创建动态、交互性更强的网页应用。 首先，我们需要...
本资源“jQuery下拉列表之应用于移动端选择银行特效源码.zip”正是针对这一需求，提供了一种在移动端实现下拉列表选择银行的特效解决方案。 首先，jQuery的下拉列表（Dropdown）是一种常见的用户界面元素，用于展示...
用到的方法为：appendTo() 格式：$(content).appendTo...看一下具体实现的代码： <html xmlns=http://www.w3.org/1999/xhtml> <head> <title></title> [removed][removed] <script type
总之，jQuery下拉列表插件jQselectable是一个实用的工具，它能够帮助开发者快速创建具有吸引力和功能性的下拉列表，提升网站的用户体验。通过熟练掌握其API和配置选项，你可以轻松地在项目中实现各种定制化的下拉...