PHP & JavaScript Room :: 設置サンプル

<form action="#">
    <table>
        <tr>
            <th>好きなホラー映画</th>
            <th>&nbsp;</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>