做项目的时候要用到的一个小功能，以前做过的，用的纯JS，今天翻出来看发现只能在IE中运行的，自己改成jquery的了，该功能很常见，不过一直不知道他的学名叫什么，所以也就随便起个了，大家看下面的图都应该知道了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>select列表双向选择</title>
<style type="text/css">
select
{
width: 100%;
height: 160px;
}
div
{
float: left;
}
#div1, #div3
{
width: 150px;
}
#div2
{
width: 120px;
}
.btn
{
display: block;
margin: 10px auto;
width: 80px;
}
</style>
</head>
<body>
<div id="div1">
<select id="dltSource" name="dltSource" size="10" multiple="multiple">
<option value="苹果">苹果</option>
<option value="雪梨">雪梨</option>
<option value="西瓜">西瓜</option>
<option value="荔枝">荔枝</option>
<option value="龙眼">龙眼</option>
<option value="香蕉">香蕉</option>
</select>
</div>
<div id="div2">
<input type="button" value=">" class="btn" onclick="Add($('#dltSource'),$('#dltTarget'))" />
<input type="button" value=">>" class="btn" onclick="AddAll($('#dltSource'),$('#dltTarget'))" />
<input type="button" value="<" class="btn" onclick="Add($('#dltTarget'),$('#dltSource'))" />
<input type="button" value="<<" class="btn" onclick="AddAll($('#dltTarget'),$('#dltSource'))" />
</div>
<div id="div3">
<select id="dltTarget" name="dltTarget" size="10" multiple="multiple">
</select>
</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/* 添加选择的项 */
function Add(ObjSource, ObjTarget) {
if(ObjSource.val() ==null) return; // 如果没有选择则退出函数，无这句话的话IE6会报错
$.each(ObjSource.val(), function(i, n) { // 循环原列表中选中的值，依次添加到目标列表中
var html = "<option value='" + n + "'>" + n + "</option>";
ObjTarget.append(html);
});
ObjSource.find("option:selected").remove(); // 原列表中选中的值删除
}
/* 添加全部 */
function AddAll(ObjSource, ObjTarget) {
ObjTarget.append(ObjSource.html()); // 目标列表的HTML加上原列表的所有HTML
ObjSource.empty(); // 原列表清空
}
</script>
分享到：
相关推荐
jquery制作的select列表双向选择，兼容性肯定是不错的，需要的朋友可以学习下 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE> New Document </...
而“jQuery下拉列表框双向选择”则涉及到一种交互设计，允许用户在一个下拉列表中选择项，并同时将这些选择同步到另一个相关的下拉列表中，实现数据的双向同步。 要实现这样的功能，我们需要理解以下几个关键知识点...
改进后的双向选择器将元素改成了select option，这样的改进让双向选择器支持了shift多选，大大提高了用户体验。 知识点2：shift多选 shift多选是一种通过按住shift键来选择多个连续选项的操作方式。在改进后的双向...
本文将深入探讨如何使用jQuery实现双向选择列表框，这在需要同步两个下拉列表的选择时非常有用，例如在一对一映射或多选选项同步的情景。 首先，双向选择列表框的基本概念是，当在一个列表中做出选择时，相应的选项...
在IT领域，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要...
在网页设计和开发中，jQuery 是一款非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作等任务。"jQuery 多选下拉框"是一个基于jQuery实现的组件，它提供了一种用户友好的方式来处理多选功能，尤其...
而jQuery则是一套广泛使用的JavaScript库，主要用于简化DOM操作、事件处理、动画制作和Ajax交互等。当我们需要在Angular项目中实现与Bootstrap风格相一致的自定义指令，并且希望这些指令能够与jQuery集成时，就能够...
首先，jQuery UI 提供了多种交互组件，包括日期选择器（Datepicker）、对话框（Dialog）、滑块（Slider）、下拉菜单（Selectmenu）等。这些组件都遵循一致的设计原则，易于集成到项目中，同时也支持自定义样式以适应...
表单处理方面，`Validator`、`Parsley`、`jquery.form.js`、`Validform`、`validator.js`和`Fort.js`提供了表单验证功能，而`Chosen`、`Select2`和`bootstrap-select`则优化了下拉选择框。`iCheck`增强了复选框和...
BlazeDS是一个Adobe提供的实时数据和远程调用解决方案，它可以作为Flex和Java之间的桥梁，实现双向数据流和远程过程调用。利用BlazeDS，Flex客户端可以订阅Java服务器上的事件，实时获取更新数据，同时也可以调用...
在这个例子中，`items`数组包含了表格的所有行数据，`ng-model`指令用于双向数据绑定，将表格行的选择状态与`item.selected`属性关联。 此外，还可以在控制器中添加方法来处理用户交互，比如刷新数据(`refresh()`)...
├最新AngularJS开发宝典—第011讲 实例讲解angular操作select列表框.mp4 ├最新AngularJS开发宝典—第012讲 函数使用方法大小写转换与对象深拷贝.mp4 ├最新AngularJS开发宝典—第013讲 函数使用对象扩充与数据遍历...
43. **Select2**：增强型jQuery选择框插件，提供高级筛选和搜索功能。 44. **IziToast**：创建美观的通知弹窗。 45. **IziModal**：模态框库，提供定制化选项。 **CSS库和设计相关** 1. **Animate.css**：包含多种...