<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>demo</title>
<script src="jquery-1.4.4.min.js"></script>
<script>
$(function(){
//选择一项
$("#addOne").click(function(){
$("#from option:selected").clone().appendTo("#to");
$("#from option:selected").remove();
});
//选择全部
$("#addAll").click(function(){
$("#from option").clone().appendTo("#to");
$("#from option").remove();
});
//移除一项
$("#removeOne").click(function(){
$("#to option:selected").clone().appendTo("#from");
$("#to option:selected").remove();
});
//移除全部
$("#removeAll").click(function(){
$("#to option").clone().appendTo("#from");
$("#to option").remove();
});
//移至顶部
$("#Top").click(function(){
var allOpts = $("#to option");
var selected = $("#to option:selected");
if(selected.get(0).index!=0){
for(i=0;i<selected.length;i++){
var item = $(selected.get(i));
var top = $(allOpts.get(0));
item.insertBefore(top);
}
}
});
//上移一行
$("#Up").click(function(){
var selected = $("#to option:selected");
if(selected.get(0).index!=0){
selected.each(function(){
$(this).prev().before($(this));
});
}
});
//下移一行
$("#Down").click(function(){
var allOpts = $("#to option");
var selected = $("#to option:selected");
if(selected.get(selected.length-1).index!=allOpts.length-1){
for(i=selected.length-1;i>=0;i--){
var item = $(selected.get(i));
item.insertAfter(item.next());
}
}
});
//移至底部
$("#Buttom").click(function(){
var allOpts = $("#to option");
var selected = $("#to option:selected");
if(selected.get(selected.length-1).index!=allOpts.length-1){
for(i=selected.length-1;i>=0;i--){
var item = $(selected.get(i));
var buttom = $(allOpts.get(length-1));
item.insertAfter(buttom);
}
}
});
});
</script>
</head>
<body>
<table align="center" width="288" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<select name="from" id="from" multiple="multiple" size="10" style="width:100%">
<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>
</select>
</td>
<td align="center">
<input type="button" id="addAll" value=" >> " style="width:50px;" /><br />
<input type="button" id="addOne" value=" > " style="width:50px;" /><br />
<input type="button" id="removeOne" value="<" style="width:50px;" /><br />
<input type="button" id="removeAll" value="<<" style="width:50px;" /><br />
</td>
<td colspan="4">
<select name="to" id="to" multiple="multiple" size="10" style="width:100%">
</select>
</td>
<td align="center">
<input type="button" id="Top" value="置顶" style="width:50px;" /><br />
<input type="button" id="Up" value="上移" style="width:50px;" /><br />
<input type="button" id="Down" value="下移" style="width:50px;" /><br />
<input type="button" id="Buttom" value="置底" style="width:50px;" /><br />
</td>
</tr>
</table>
</body>
</html>
实现效果如下图:
写完了才发现有插件~
附上插件官网地址(multiselect2side plugin):http://www.senamion.com/blog/jmultiselect2side.html
分享到:
相关推荐
Jquery MultiSelect不错的左右选择的选择框 值得学习
自己写的基于zTree-MultiSelect实现的左右选择框Demo,有好几个例子,可以参考
jquery.multiselect.js
jquery的multiselect2side左右选择框插件
这个插件允许用户以树型的形式来呈现列表复选框的选择。多用于权限管理中用于分配不同的权限。使用文档,请参考:https://github.com/patosai/tree-multiselect.js 2、运行环境 2.1、需要引入jquery.v1.8+版本和...
jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件。该下拉列表功能强大,可以实现多选和单选,可制作打开和关闭下拉框时的炫酷动画效果,提供丰富的回调函数和其它方法。
2、某个兄弟手写的一个控件: 这个符合我的需求,简单实用,但是不满足我的另一个需求,我的需求是右边的选择框需要能选择不同颜色的图片,而且这个样式有点不美观。怎奈自己写一个吧,费了我半天的劲,总算搞定了...
这个插件允许用户以树型的形式来呈现列表复选框的选择。多用于权限管理中用于分配不同的权限。
jQuery MultiSelect 将多选列表变成带有复选框的美观且易于使用的列表。 该插件只是本机选择列表元素的替代接口。 当您检查插件中的选项时,将在本机列表中选择该值。 这样一来,该值可以以一种形式提交,也可以...
jQuery多选择jQuery插件,可将所有多选字段转换为复选框
jQuery表单复选框与单选框美化特效</title> <link rel="stylesheet" type="text/css" href="css/iconfont.css?3.1.64"/> <link rel="stylesheet" type="text/css" href="css/multiselect.css?3.1....
JavaScript 多选小部件这个 JavaScript 组件是一个提供多选框控件的小部件。 您提供一个数据数组,调用render()方法,然后呈现控件。 此小部件允许用户通过简单地单击项目来选择项目,而无需按 CTRL 键。 该组件在...
jQuery是没有必要的。 分离了您的数据和选择数据。 不会修改所做的数据。 内置搜索。 完全控制所选项目的模型,以使其符合您的要求。 有两个视图选项:普通列表和复选框。 预选值。 限制选择计数。 按属性...
前端插件学习,包含几款图片预览,下拉选择,自动搜索,qq表情,富文本框。具体为daterangepicker、autocomplete、photoswipe、smart-zoom、fancybox、jquery.qqface、bootstrap-dialog3、lightbox、clipboard、...
创建带有图标复选框的简单列表。 特征 选择并选择全选 不需要jQuery 入门 使用Bower安装它: bower install angular-simple-select 将依赖项添加到项目中: angular.module('myModule', ['simple-select']); 在...
合并其他免费提供的Multiselect功能,并对其进行扩展以方便使用。 技术: JavaScript-使用Require JS作为框架来增加模块化和JQuery库功能 LessJS-用于CSS重用和嵌套CSS选择器 Fontawesome-图标库 Bootstrap样式-...
2.获取选择行的值 代码如下:var rowData = jQuery(‘#List’).jqGrid(‘getGridParam’,’selarrrow’); if(rowData.length) { for(var i=0;i<rowData.length;i++) { var name= jQuery(‘#List’).jqGrid(...
如果您已经在使用jQuery,那么它可能是您的替代选择。 如果您喜欢像这样的标签列表,那么这对您来说将是一个不错的选择。 这是一个非常出色的,经过充分测试的库。 看看吧。 您也可以使用灵活地获得相同的结果。 ...