<!DOCTYPE html>
<html>
<head>
<title>moveOption.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
    //声明全局变量
    var loptionDom; //左边的select对应的Dom对象
    var roptionDom; //右边的select对应的DOM对象
    //窗体加载完毕 获取dom对象
    window.onload = function() {
        //获取左边的select对应的Dom对象
        loptionDom = document.getElementById("loption");
        //获取右边的select对应的DOM对象
        roptionDom = document.getElementById("roption");
    };
    //向右移动
    function moveRight(value) {
        //获取左边select所有的option集合对象
        var options = loptionDom.options;
        //判断是否是单个移动
        if (value == 1) {
            //记住要移动的option对象
            var remberoptionDom = null;
            //记住要移动的option的数量
            var count = 0;
            //遍历options集合对象
            for (var i = 0; i < options.length; i++) {
                //获取option对象
                var optionDom = options[i];
                //判断是否是选中的option对象selected="selected"
                if (optionDom.selected) {
                    //赋值
                    remberoptionDom = optionDom;
                    //数量递增
                    count++;
                }
            }

            //判断数量是否是1 如果是1代表移动一个
            if (count == 1) {
                //添加到了右边
                roptionDom.appendChild(remberoptionDom);
                //左边要移除
                loptionDom.removeChild(remberoptionDom);
            } else if (count == 0) {
                alert("请选择要移动的数据");
            } else {
                alert("请选择==>移动");
            }
        } else if (value == 0) {
            //遍历操作                为啥 一定要写成    i=options.length-1  ; i>=0;i--
            for (var i = options.length - 1; i >= 0; i--) {
                //获取option对象
                var optionDom = options[i]; //options[0]  //8
                //判断是否被选中
                if (optionDom.selected) {
                    //左边要移除
                    loptionDom.removeChild(optionDom);
                    //添加到了右边
                    roptionDom.appendChild(optionDom);
                }
            }
        }
    }
    //向左移动
    function moveLeft(value) {
        if (value == 1) {
        } else if (value == 0) {
        }
    }
</script>
</head>

<body>
    <!-- 左右移动的整个代码 -->
    <div style="width: 400px; height: 280px;margin: 0px auto;">
        <!-- 左边的代码 -->
        <div style="width: 100px; float:left;">
            <select multiple="multiple" style="height: 200px; width: 80px;"
                id="loption">
                <option>选项1</option>
                <option>选项2</option>
                <option>选项3</option>
                <option>选项4</option>
                <option>选项5</option>
                <option>选项6</option>
                <option>选项7</option>
                <option>选项8</option>
                <option>选项9</option>
            </select>
        </div>

        <!-- 中间代码 -->
        <div style="width: 100px;float: left;margin-right: 30px;">
            <ul style="list-style: none;">
                <li><input type="button" value="-->"
                    style="width: 40px; margin-bottom: 15px;" onclick="moveRight(1)" />
                    <input type="button" value="==>"
                    style="width: 40px;margin-bottom: 15px;" onclick="moveRight(0)" />
                    <input type="button" value="<--"
                    style="width: 40px;margin-bottom: 15px;" onclick="moveLeft(1)" /> <input
                    type="button" value="<==" style="width: 40px;margin-bottom: 15px;"
                    onclick="moveLeft(0)" /></li>
            </ul>
        </div>

        <!-- 右边代码 -->
        <div style="width: 100px; float: left; ">
            <select multiple="multiple" style="height: 200px; width: 80px;"
                id="roption"></select>
        </div>

    </div>

</body>
</html>

效果：