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