<div class="content">
    <select  multiple="multiple" id="selected"> <!-- multiple准许下拉菜单多选 -->
        <option value="吃">选项1</option>
        <option value="喝">选择2</option>
        <option value="玩">选项3</option>
        <option value="乐">选项4</option>
        <option value="睡">选项5</option>
    </select>
    <span id="right">选择右移动>></span>
    <span id="right_all">全部右移>></span>
</div>
<div class="content">
    <select multiple="multiple" id="selected1">
    </select>
    <span id="left">选择左移</span>
    <span id="left_all">全部左移</span>
</div>

*{
    padding: 0;
    margin: 0;
}
body {
    font-size: 12px;
    padding: 100px;
}
select {
    width: 100px;
    height: 167px;
    padding: 5px;
}
div.content{
    float: left;
    margin-right: 10px;
    text-align: center;
}
span {
    display: block;
    width: 100px;
    background: #eee;
    border: 1px solid #ccc;
    padding: 5px 0;
    margin: 5px 0;
    cursor: pointer;
    text-align: center;
}

//JQ
    $(function() {

            $("#right").click(function() {
                //appendTo方法在被选元素的结尾(仍然在内部)插入指定内容;
                //append()和appendTo()方法执行任务相同，不同之处在于:内容和选择器的位置，以及append()能够使用函数来附加内容;
                $("#selected option:selected").appendTo("#selected1");
            });

            $("#right_all").click(function() {

                $("#selected option").appendTo("#selected1");
            });

            $("#left").click(function() {
    
                $("#selected1 option:selected").appendTo("#selected");
            });

            $("#left_all").click(function() {

                $("#selected1 option").appendTo("#selected");
            })

            $("#selected").dblclick(function() {

                $("#selected option:selected").appendTo("#selected1")
            });

            $("#selected1").dblclick(function() {

                $("#selected1 option:selected").appendTo("#selected")
            })
        })

//js
    var s1 = document.getElementById("selected");

    var s2 = document.getElementById("selected1");

    var right = document.getElementById("right");
    var right_all = document.getElementById("right_all");
    var left = document.getElementById("left");
    var left_all = document.getElementById("left_all");

    var i = 0;

    right.onclick = function() {

        remove(selected, selected1)
    };

    left.onclick = function() {

        remove(selected1, selected)
    }
//双击
    s1.ondblclick = function() {

        remove(selected, selected1)
    }
    s2.ondblclick = function() {

        remove(selected1, selected)
    }
    
    function remove(s1, s2) {
        //selectedIntdex 设置返回下拉列表被选项目的索引号;
        if (s1.selectedIndex !== -1) {//是否存在

            var index = s1.selectedIndex;
            var text = s1.options[index].text//下拉列表的文本
            var value = s1.options[index].value;//下拉列表的value
            s1.remove(index);//删除选中的下拉列表
            //在S2中添加删除的下拉菜单
            s2.options.add(new Option(text, value)) //添加方式是new Option(text, value);
        }
    };

    right_all.onclick = function() {

        all(s1, s2);
    }
    left_all.onclick = function() {
        all(s2, s1)
    }
    function all(s1, s2) {

        for (i = 0; i < s1.options.length; i++) {

            var text = s1.options[i].text;
            var value = s1.options[i].value
            s2.options.add(new Option(text, value));        
        }

        s1.options.length = 0;
    }

select对象方法，add().selectedIndex ,multiple设置或返回是否选中多个项目；selected表示选中状态
可以使用selectedIndex != -1判断是否为选中；