案例完成代码与解析
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<meta charset="UTF-8">
<style type="text/css">
select {
height: 140px;
border: #000 1px solid;
}
</style>
</head>
<body>
<select multiple="multiple" id="select1">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<input type="button" value="<==" id="b4" onclick="b4()">
<input type="button" value="<=" id="b3" onclick="b3()">
<input type="button" value="=>" id="b1" onclick="b1()">
<input type="button" value="==>" id="b2" onclick="b2()">
<select multiple="multiple" id="select2">
<option value="游戏">游戏</option>
</select>
<script>
//现在做一号下拉列表全部向二号下拉列表移动
function b2 () {
//被动节点追加,将一号下拉列表的全部元素追加到二号下拉列表
$('#select1 option').appendTo ('#select2')
}
//现在做二号下拉列表全部向一号下拉列表移动
function b4 () {
//被动节点追加,将二号下拉列表的全部元素追加到一号下拉列表
$('#select2 option').appendTo ('#select1')
}
//现在做二号下拉列表选中的元素向一号下拉列表移动
function b3 () {
//被动节点追加,将二号下拉列表的选中的元素追加到一号下拉列表
$('#select2 option:selected').appendTo('#select1')
}
//现在做一号下拉列表选中的元素向二号下拉列表移动
function b1 () {、
//被动节点追加,将一号下拉列表的选中的元素追加到二号下拉列表
$('#select1 option:selected').appendTo('#select2')
}
</script>
</body>
</html>