Jquery实现列表框效果

在java web开发中，我们经常要用到列表框，特别在系统的权限管理中，如上图所示，要实现如上效果，请看下面的源代码：

源代码如下：

<html>
<head>
<title>全选效果</title>
<script src="jquery.js"></script>
</head>
<body background="3.png">
<div id="left" style="float:left;width:200px">
<select onDblClick="moveright()" id="list1" size="10" style="width:150px"> //这里的数据可以换成动态的
<option id="1" >第一项</option>
<option id="2" >第二项</option>
<option>第三项</option>
<option>第一项</option>
<option>第二项</option>
<option>第三项</option>
<option>第四项</option>
<option>第五项</option>
<option>第六项</option>
<option>第七项</option>
<option>第八项</option>
<option>第九项</option>
<option>第十项</option>
</select>
</div>
<div id="right" style="float:left">
<select onDblClick="moveleft()" size="10" id="list2" style="width:150px">
</select>
</div>

//注意此处的脚本须写在body中，不然会报错
<script>
var L = $("#list1");
var R = $("#list2");
function moveleft(){
var move = new Array();
$("#list2>option:selected").each(function(){
var a1 = $(this);
var a1_ = $(this).html();
var a2 = $("#list1>option");
var a2_ = $("#list1>option").html();
if(a2_==null){
$(this).remove().appendTo(L); // 当左面为空的时候向左移
}else{
a2.each(function(){
if($(this).html()==a1_){
move.push(a1_);
}else{

}
});
if(move[0]==a1_){
a1.remove();
}else{
a1.remove().appendTo(L);
}
};
});
}
function moveright(){
var move = new Array();
$("#list1>option:selected").each(function(){
var a1 = $(this);
var a1_ = $(this).html();
var a2 = $("#list2>option");
var a2_ = $("#list2>option").html();
if(a2_==null){
$(this).remove().appendTo(R);
}else{
a2.each(function(){
if($(this).html()==a1_){
move.push(a1_);
}else{

}
});
if(move[0]==a1_){

}else{
a1.remove().appendTo(R);
}
};

});
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/javaTest/archive/2012/06/04/2589097.html

Jquery实现列表框效果相关推荐

使用 jQuery Mobile 与 HTML5 开发 Web App (七) —— jQuery Mobile 列表
如 Kayo 之前所写的文章 <使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 内容格式> 中所述,这次介绍的是 jQuery M ...
火山视窗超级列表框-报表列表框操作
本源码转载自利快云https://www.lkuaiy.com/ 火山视窗超级列表框-报表列表框操作想要使用本组件首选需要配置mfc扩展界面支持类库模块. 超级列表框组件是火山中非常常用的一个组 ...
jQuery多选列表框插件Multiselect
效果如下图: 在官网这里下载所需的js,css等相关文件然后引入以下文件: <script type="text/javascript" src="js/jque ...
JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
php与mysql列表_PHP+Mysql+jQuery实现的查询和列表框选择
本篇文章主要介绍PHP+Mysql+jQuery实现的查询和列表框选择,感兴趣的朋友参考下,希望对大家有所帮助. 本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择 ...
php列表框怎么用,PHP+Mysql+jQuery查询和列表框选择操作实例讲解
这篇文章主要介绍了PHP+Mysql+jQuery查询和列表框选择操作实现过程,需要的朋友可以参考下本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择最终将选项加 ...
Linux程序实现弹框,jQuery实现弹出框效果绝对美观
使用到JQeury写的几个比较好的Popup DialogBox,觉得不错.和大家分享下.使用它们结合.net可以实现很好的效果. 1.jqpopup: 是个可以拖拽,缩放并可以在它上面显示html页 ...
jQuery实现两个列表框的值之间的互换：
jQuery实现两个列表框的值之间的互换: 截图如下: 代码如下: <%@ page language="java" import="java.util.*&quo ...
【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的...
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

Jquery实现列表框效果

Jquery实现列表框效果相关推荐

最新文章

热门文章