1. 程式人生 > >前端框架jQ使用之下拉框文字內容的轉移

前端框架jQ使用之下拉框文字內容的轉移

在掌握了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>

以上程式碼可以供學習交流直接使用,轉載請宣告來源地址。