リストボックスの値増減サンプル

ソースは未完成だけど、メモとして残しておくため記載。
リストボックス内の項目を、右から左に移動できたりする。

[追記]
通りすがりさんに指摘を受け、バグがあったので直す。
以下ソースをコピーしてHTMLで保存。jqueryを同じフォルダに準備してファイル名をあわせれば、動くはずです。

<!-- 確認フィールド -->
<table border="0" cellspacing="1" cellpadding="3" class="search">
	<tr>
		<td>
			<table>
				<tr>
					<td colspan="4">
                                               テスト
					</td>
				</tr>
				<tr>
					<td>
						<img src="" alt="２上矢印" onclick="item_top_up()"/><br />
						<img src="" alt="上矢印" onclick="item_up()"/><br />
						<br />
						<img src="" alt="下矢印" onclick="item_down()"/><br />
						<img src="" alt="２下矢印" onclick="item_bottom_down()"/><br />
					</td>
					<td>
						カテゴリ画面の表示商品<br />
						<select  multiple="multiple" size="10" name='add_list' id='add_list'>
						</select>
						<br />
						※左側の矢印を押下して表示順位を変更してください
					</td>
					<td>
						<button type="button" name="add" value="add" onclick="add_item()">←追加</button>
						<br />
						<button type="button" name="del" value="del" onclick="del_item()">削除→</button>
					</td>
					<td>
						非表示の商品<br />
						<select  multiple="multiple" size="10" name='del_list' id='del_list'>
						    <option value='a'>Aaaaaaaaaa</option>
						    <option value='b'>Bbbbbbbbbb</option>
						    <option value='c'>Cccccccccc</option>
						    <option value='d'>Dddddddddd</option>
						    <option value='e'>Eeeeeeeeee</option>
						</select>
						<br />
						※複数選択できます
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
// 表示リストに商品追加
function add_item() {
	common_item_move($('#add_list'), $('#del_list'), $('#del_list option:selected'));
	return false;
}

// 非表示リストに商品追加
function del_item() {
	common_item_move($('#del_list'), $('#add_list'), $('#add_list option:selected'));
	return false;
}

// 商品追加共通処理
function common_item_move(add_to_list, del_to_list, del_to_list_option){
	// 1.表示リストに選択中のリストを取得
	del_to_list_option.each(function() {
		// 2.非表示リストに1のリストを追加
		add_to_list.append($('<option>').attr({ value: $(this).val() }).text($(this).text()));
		// 3.表示リストから1のリストを削除
		del_to_list.children('[@value=' + $(this).val() + ']').remove();
  	});
}

// 商品順番一番上に上げる
function item_top_up(){
	// indexが0のものを選択している場合は、何も行なわない
	if($('#add_list').children('[@index=0]').attr("selected"))
		return;
	// 選択
	var move_num = 0;
	$('#add_list option:selected').each(function(i){
		var index = $(this).attr("index");
		if (index > 0){
			var before = null;
			// 最初のループ
			if(i == 0){
				before = $('#add_list').children('[@index=0]');
				move_num = index;
			}
			else {
				var move_indx = $(this).attr("index") - move_num;
				before = $('#add_list').children(
							'[@index=' + move_indx + ']'
						 );
			}
			$(this).insertBefore(before);
		}
	});
}

// 商品順番一番下に下げる
function item_bottom_down(){
	// indexが最下層のものを選択している場合は、何も行なわない
	var max_index = $('#add_list').children().length - 1;
	if($('#add_list').children('[@index=' + max_index + ']').attr("selected"))
		return;
	// 選択
	var move_num = 0;
	var list_selected = [];
	$('#add_list option:selected').each(function(i){
		list_selected.push($(this));
	});
	for(var i = list_selected.length - 1; i >= 0; i--){
		var index = list_selected[i].attr("index");
		if (index < max_index){
			var after = null;
			// 最初のループ
			if(i == list_selected.length - 1){
				after = $('#add_list').children('[@index=' + max_index + ']');
				move_num = max_index - index;
			}
			else {
				var move_indx = list_selected[i].attr("index") + move_num;
				after = $('#add_list').children(
							'[@index=' + move_indx + ']'
						 );
			}
			list_selected[i].insertAfter(after);
		}
	}
}

// 商品順番上げる
function item_up(){
	// 選択
	$('#add_list option:selected').each(function(){
		var index = $(this).attr("index");
		var current = $('#add_list').children('[@index=' + index + ']');
		var before_index = -1;
		var before = $('#add_list').children('[@index=' + (index + before_index) + ']');
		if(!before.attr("selected")){
			current.insertBefore(before);
		}
	});
}
// 商品順番下げる
function item_down(){
	// 選択
	var list = $('#add_list option:selected');
	for (i = list.length-1; i >= 0; i--) {
		var idx = jQuery(list[i]).attr('index');
		var cur = $('#add_list').children('[@index='+idx+']');
		var aft = $('#add_list').children('[@index='+(idx+1)+']');
		if(!aft.attr('selected')){
			aft.insertBefore(cur);
		}
	}
}
//-->
</script>