jquery系列---实现列表框效果

最新推荐文章于 2018-10-07 15:45:22 发布

追寻

最新推荐文章于 2018-10-07 15:45:22 发布

阅读量1.3k

点赞数 2

分类专栏： jquery知识文章标签： jquery function web开发 float list null

本文链接：https://blog.csdn.net/wwww1988600/article/details/7629997

版权

jquery知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在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>

追寻

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery系列---实现列表框效果

在java web开发中，我们经常要用到列表框，特别在系统的权限管理中，如上图所示，要实现如上效果，请看下面的源代码：源代码如下：全选效果 //这里的数据可以换成动态的第一项第二项第三项第一项第二项第三项第四项第五项第六项第七项第八项第九项第十项 //注意此处的脚本
复制链接

扫一扫

专栏目录