jquery左右select移动option

最近在弄jquery左右移动，感觉挺简单的，而且很好使，所以分享出来一下。欢迎大家指正与发表意见。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>MultiSelects(左右选框) 完美版</title>  
<script src="jquery-1.7.1.js"></script>  
<script>  
$(document).ready(function(){
    $("#left").dblclick(function(){  
        moveRight();       
    });  
     
    $("#right").dblclick(function(){  
        moveLeft();        
    });  
     
    $("#add").click(function(){  
        moveRight(); 
    });  
     
    $("#remove").click(function(){  
        moveLeft(); 
    });  
     
    $("#addall").click(function(){  
        $("#right").append($("#left option:selected"));  
    });  
     
    $("#removeall").click(function(){  
        $("#left").append($("#right option:selected"));  
    });  
     
    $("#leftup").click(function() {  
        up('left'); 
    });  
     
    $("#leftdown").click(function(){  
        down('left');  
    });  
     
    $("#rightup").click(function(){  
        up('right'); 
    });  
     
    $("#rightdown").click(function(){  
        down('right');  
    });  
});  

function moveRight() {
    var alloptions = $("#left option");  
    var so = $("#left option:selected");  
  
    $("#right").append(so);
}

function moveLeft() {
    var alloptions = $("#right option");  
    var so = $("#right option:selected");  
     
    $("#left").append(so);  
}

function up(obj) {
    var so = $("#"+obj+" option:selected");  
    if(so.index() != 0) {  
        so.each(function() {  
            $(this).prev().before($(this));  
        });  
    }
}

function down(obj) {
    var alloptions = $("#"+obj+" option");  
    var so         = $("#"+obj+" option:selected");  
    var soLen      = so.length-1;
     
    if(so.index() != alloptions.length-1) {  
        for(i=soLen; i>=0; i--) {  
            var item = $(so.get(i));  
            item.next().after(item);
        }  
    }
}
</script>  
</head>  
  
<body>  
<table width="288" border="0" cellpadding="0" cellspacing="0">  
    <tr>  
        <td width="29">  
            <input type="button" name="leftup" id="leftup" value="↑" /><br />  
            <input type="button" name="leftdown" id="leftdown" value="↓" />
        </td>  
        <td width="100">
            <select name="left" size="10" multiple="multiple" id="left" style=" width:100px;">  
                <option value="opt01">option01</option>  
                <option value="opt02">option02</option>  
                <option value="opt03">option03</option>  
                <option value="opt04">option04</option>  
                <option value="opt05">option05</option>  
                <option value="opt06">option06</option>  
                <option value="opt07">option07</option>  
                <option value="opt08">option08</option>  
                <option value="opt09">option09</option>  
                <option value="opt10">option10</option>  
            </select>
        </td>  
        <td width="37" align="center">
            <input type="button" name="addall" id="addall" value=">|" /><br />
            <input type="button" name="add" id="add" value=">>" /><br />
            <input type="button" name="remove" id="remove" value="<<" /><br />
            <input type="button" name="removeall" id="removeall" value="|<" />
        </td>  
        <td width="100">
            <select name="right" size="10" multiple="multiple" id="right" style="width:100px;"></select>
        </td>  
        <td width="119">  
            <input type="button" name="rightup" id="rightup" value="↑" /><br />  
            <input type="button" name="rightdown" id="rightdown" value="↓" />
        </td>  
    </tr>  
</table>  
<p>支持直接双击添加/删除，上下(支持间隔)排序</p>  
</body>  
</html>
完
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/98526.html
jquery左右select移动option

相关推荐

发表回复
