JQuery MultiSelect（左右选择框）
<!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>
JQuery MultiSelect（左右选择框）的更多相关文章
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- jquery 下拉选择框/复选框常用操作
通常 1.我们需要获取select中选中的值,可以使用: $("#selectID").find("option:selected").val(); --一般 ...
- js：jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery.multiselect 多选下拉框实现
第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的 ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 用jquery修改默认的单选框radio或者复选框checkbox选择框样式
默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...
- ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- jQuery左右选择框
<!DOCTYPE html> <html> <head> <title>左右选择框</title> <style type=&quo ...
随机推荐
- FS210开发板上Qt4.7.0移植过程
作者:冯老师,华清远见嵌入式学院讲师. 1. 搭建Qt开发环境平台 1.开发环境:ubuntu 12.04 2.交叉编译链:arm-cortex_a8-linux-gnueabi 3.开发板:FS21 ...
- golang 简易聊天
client.go ------------------------------ package main import ( "net" "fmt" " ...
- GO语言练习：for基本用法
1.代码 2.运行 1.代码 package main import "fmt" func main(){ ; k < ; k++{ JLoop: ; j < ; j+ ...
- 使用explain查看mysql查询执行计划
explain语句: 字段解释: type: all(全表扫描) ref() possible_keys: 预测使用什么列做为索引 key: 实际使用的key ...
- css 多行溢出
<div style=" height: 38px; max-width: 180px; -webkit-box-orient: vertical; word-break: break ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- Linux内核总结
1.文件系统就是数据的存储结构,不要以为你的硬盘存储东西理所当然,没有文件系统,你存的只是0010101101100 2.内存管理是计算机运行时内存的分配和使用. 3.进程管理就是说每次执行一个程序都 ...
- C# Image 、 byte[] 、Bitmap之间的转化
一.Byte[] 转 System.Drawing.Bitmap public static Bitmap CreateBitmap(byte[] originalImageData, int ori ...
- 【iCore3 双核心板】例程七：WWDG看门狗实验——复位ARM
.. 实验指导书及代码包下载: http://pan.baidu.com/s/1qWEK7fQ iCore3 购买链接: https://item.taobao.com/item.htm?id=524 ...
- 新广告法，极限词剔除，替换掉的mysql语句
国家级,世界级,最高级, 最佳,最大,第一, 唯一,首个,首选, 最好,最大,精确, 顶级,最高,最低, 最,最具,最便宜, 最新,最先进,最大程度, 最新技术,最先进科学,国家级产品, 填补国内空白 ...