當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Jquery实现列表框效果

發(fā)布時間：2025/3/15 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 Jquery实现列表框效果小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

在java web開發(fā)中，我們經(jīng)常要用到列表框，特別在系統(tǒng)的權(quán)限管理中，如上圖所示，要實現(xiàn)如上效果，請看下面的源代碼：
源代碼如下： <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"> ?//這里的數(shù)據(jù)可以換成動態(tài)的
<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>

轉(zhuǎn)載于:https://www.cnblogs.com/javaTest/archive/2012/06/04/2589097.html

總結(jié)

以上是生活随笔為你收集整理的Jquery实现列表框效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。