在java web開發中，我們經常要用到列表框，特別在系統的權限管理中，如上圖所示，要實現如上效果，請看下面的源代碼：
源代碼如下：
<html>
<head>
<title>全選效果</title>
<script src="jquery.js"></script>
</head>
<body background="3.png">
<p 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>
</p>
<p id="right" style="float:left">
<select onDblClick="moveleft()" size="10" id="list2" style="width:150px">
</select>
</p>
//註意此處的腳本須寫在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>
摘自 追尋—專欄
