<!DOCTYPE html>
<html>
<head>
<title>Jqury双下拉框内容移动</title>
<meta name="keyword" content="jquery select" />
<meta name="description" content="Jquery练习3之双下拉框移动" />
<meta http-equiv="content-type" content="text/html,charset=utf-8" />
<style type="text/css">
body>div{margin:90px auto;width:400px;}
#left{float:left;}
#right{float:right;}
select{width:150px;height:210px;font-size:20px;font-family:微软雅黑;}
input{display:block;width:80px;line-height:30px;height:40px;font-size:18px;font-family:微软雅黑;margin:10px auto;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js "></script>
<script type="text/javascript">
$(document).ready(function(){
$("#addRight").click(function(){
$("#select2").append("#select1 option:selected");
alert();
});
});
</script>
</head>
<body>
<div>
<div id="left">
<select multiple="multiple" id="select1" size="3">
<option>001</option><option>002</option><option>004</option><option>004</option><option>
005</option>
</select>
<div><input type="button" id="addRight" name="add" value="选中>>" />
<input type="button" id="addAllRight" name="addAll" value="全选>>" /></div>
</div>
<div id="right">
<select multiple="multiple" id="select2">
<option>006</option><option>007</option><option>008</option><option>009</option><option>
010</option>
</select>
<div><input type="button" id="addLeft" name="add" value="<<选中" />
<input type="button" id="addAllLeft" name="add" value="<<全选" /></div>
</div>
</div>
</body>
</html>
上面的代码中$("#select2").append("#select1 option:selected");不可以实现效果,但是$("#select1 option:selected").appendTo("#select2");为什么就可以实现,append和appendTo不是交换选择器位置就可以了吗?
作用相同,写法相反,如这两种写法作用是一样的:
$(function(){ var spanTest="<span>Span Test</span>"; $("#one").append($(spanTest)); $(spanTest).appendTo($("#one")); });
参考jQuery API:http://api.jquery.com/appendTo/
我写的时候是相反的啊,但是为什么效果不一样呢?
@lisanlian: 用
$("#select2").append($("#select1 option:selected"));
试试
@artwl: 嗯,解决了,谢谢
append 是不是要求是 html 的拼接字符串啊