2个select multipe的元素上下移动

2个select multipe的元素左右移动

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	function selectEmp(){
	    $("#empListSelect option:selected").each(function(index, item){
	        $(this).removeAttr("selected");
	        $("#selectedEmpList").append(item);
	    });
	}
	
	function removeEmp(){
	    $("#selectedEmpList option:selected").each(function(index, item){
	        $(this).removeAttr("selected");
	        $("#empListSelect").append(item);
	    });
	}
</script>
</head>
<body>
    <table border="0" align="center" cellspacing="5" cellpadding="1" style="width: 100%;height: 100%;">
            <tr>
                <td valign="top" align="left" style="border:3px solid #888888;width: 30%">
                    <p style="font-size:small;">待选员工列表</p>
                    <select multiple="multiple" id="empListSelect" size="18" style="width: 100%;">
                        <option value="x1">X1</option>
                        <option value="x2">X2</option>
                        <option value="x3">X3</option>
                    </select>
                </td>
                <td valign="middle" align="center" style="border:3px solid #888888;width: 10%">
                    <button id="selectEmpBtn" onclick="selectEmp()">&gt;&gt;&gt;</button><br/>
                    <button id="removeEmpBtn" onclick="removeEmp()">&lt;&lt;&lt;</button>
                </td>
                <td valign="top" align="left" style="border:3px solid #888888;width: 30%">
                    <p style="font-size:small;">已选员工列表</p>
                    <select multiple="multiple" id="selectedEmpList" size="18" style="width: 100%;">
                        <option value="x4">X4</option>
                    </select>
                </td>
            </tr>
        </table>
</body>
</html>

作为一个jQuery初学者，有一点比较疑惑，在左边的下拉选单中选中一个元素点移动按钮后，我可以理解这个被选中的元素被移动到了右边，因为有"append"操作，但是js方法里

$(this).removeAttr("selected");$("#selectedEmpList").append(item);

这2行代码为什么会使被选中的元素消失，代码里并没有删除原来元素操作，只是把元素的selected属性移除了，难道是因为append操作把元素移动过来了？

2个select multipe的元素上下移动

相关推荐