<form action="#">
<table>
<tr>
<th>好きなホラー映画</th>
<th> </th>
<th>嫌いなホラー映画</th>
</tr>
<tr style="vertical-align:top">
<td>
<select id="moveA" size="10" style="width:150px;">
<option value="jason">13日の金曜日</option>
<option value="flady">エルム街の悪夢</option>
<option value="screem">スクリーム</option>
<option value="lastsummer">ラスト・サマー</option>
</select>
</td>
<td>
<input type="button" value="→移動→" onclick="fMoveItem('A','B')" /><br>
<input type="button" value="←移動←" onclick="fMoveItem('B','A')" /><br>
</td>
<td>
<select id="moveB" size="10" style="width:150px;">
<option value="exsosit">エクソシスト</option>
<option value="braindead">ブレインデット</option>
<option value="syco">サイコ</option>
<option value="zombi">ゾンビ</option>
<option value="pet">ペット・セメタリー</option>
</select>
</td>
</tr>
</table>
<p id="resMoveItem"></p>
</form>
<script type="text/javascript">
/* アイテム移動 */
function fMoveItem(from,to){
var s="";
/* 移動元 */
var frmObj=document.getElementById("move"+from);
/* 移動先 */
var toObj=document.getElementById("move"+to);
/* 移動元の選択アイテムのインデックス番号 */
var frmIdx=frmObj.selectedIndex;
/* 移動先のアイテム数 */
var toLen=toObj.length;
/* 移動するアイテムが選択されていた場合 */
if(frmIdx>=0){
/* 先に、移動するアイテムのテキストと値を変数に格納 */
var moveText=frmObj[frmIdx].text;
var moveValue=frmObj[frmIdx].value;
/* 移動するアイテムを削除 */
frmObj.remove(frmIdx);
/* OPTION要素を生成 */
var optObj=document.createElement("OPTION");
/* OPTION要素のvalue属性を設定 */
optObj.setAttribute("value",moveValue);
/* OPTION要素のテキストを設定 */
if(navigator.userAgent.indexOf("MSIE")>-1){
optObj.innerText=moveText;
}else{
optObj.textContent=moveText;
}
/* 移動先に追加 */
toObj.appendChild(optObj);
s="";
}else{
s+="<span class='caution'>※移動するアイテムがないか、移動するアイテムが選択されていません。<\/span>";
}
document.getElementById("resMoveItem").innerHTML=s
}
</script>