jQueryでセレクトボックス（multiple）間の移動

HTML

<select name="list1" size="5" multiple="multiple">
	<option value="項目1">項目1</option>
	<option value="項目2">項目2</option>
	<option value="項目3">項目3</option>
	<option value="項目4">項目4</option>
	<option value="項目5">項目5</option>
	<option value="項目6">項目6</option>
	<option value="項目7">項目7</option>
	<option value="項目8">項目8</option>
	<option value="項目9">項目9</option>
	<option value="項目10">項目10</option>
</select>

<select name="list2" size="5" multiple="multiple"></select>

<button type="button" id="to_right">»</button><
<button type="button" id="to_left">«</button>

JavaScript

$(function() {
	/**
	 * 項目を移動する
	 * @param {string} source 移動元のname属性値
	 * @param {string} target 移動先のname属性値
	 */
	var move = function(source, target) {
		// 移動元で選択されている項目要素を取得し繰り返す
		$('select[name=' + source + '] option:selected').each(function() {
			// 対象の項目要素を移動先へ複製
			$('select[name=' + target + ']').append($(this).clone());

			// 対象の項目要素を削除
			$(this).remove();
		});
	};

	// 右へ移動するボタンを押した時
	$('#to_right').on('click', function() {
		move('list1', 'list2');
	});

	// 左へ移動するボタンを押した時
	$('#to_left').on('click', function() {
		move('list2', 'list1');
	});
});