在掌握了jQ的基礎知識之後，我們來看看jQ如何實現下拉框文本內容的轉移？
其實，在之前，博主我也寫過一篇使用js實現下拉框文本內容的轉移的文章，需要比較強的邏輯，jQ就簡化了代碼書寫，便於理解。
寫在前面：一定要記得導入js庫，建議不要最新的。
直接上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wide {
width: 400px;
margin: 0 auto;
}
.selcetwords {
width: 100px;
}
</style>
</head>
<body>
<div class="wide">
<!--<form action="#" method="get" name="myform">-->
<select size="10" name="leftwords" id="leftwords" class="selcetwords" multiple="multiple">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
</select>
<button id="rightmove">右移</button>
<button id="leftmove">左移</button>
<select size="10" name="rightwords" id="rightwords" class="selcetwords" multiple="multiple">
<option value="xxx">xxx</option>
<option value="yyy">yyy</option>
<option value="zzz">zzz</option>
</select>
<!--</form>-->
</div>
</body>
<script type="text/javascript">
$().ready(
function(){
$("#rightmove").click(
function(){
$("option:selected").appendTo($("#rightwords"));
}
);
$("#leftmove").click(
function(){
$($("#leftwords")).append($("option:selected"));
}
);
}
);
</script>
</html>
以上代碼可以供學習交流直接使用，轉載請聲明來源地址。