使用js实现下拉框左移右移的功能

主要涉及到的就是jquery中几个方法的使用:map(),each(),inArray().相关的使用方法可以参考文档使用
直接上代码

$(function () {
    //选中所有左边下拉框所有option右移
    $("#selectAll").click(function(){
        $(".AllRoles option").appendTo($(".selectRoles"));
    });
    //选中所有右边下拉框所有option右移
    $("#deselectAll").click(function(){
        $(".AllRoles").append($(".selectRoles option"));
    });
    $("#select").click(function(){
        //获取到左边所有选中的option
        $(".AllRoles option:selected").appendTo($(".selectRoles"));
    });
    $("#deselect").click(function(){
        //获取到左边所有选中的option
        $(".AllRoles").append($(".selectRoles option:selected"));
    });
});
//将存在于右边下拉框中的数据从左边删除
$(function(){
    //获取到左边下拉框中所有的数据的id,存放在一个数组中
    var ids = $.map($(".selectRoles option"),function(option){
        return $(option).val();
    });
    //遍历左边的下拉框,对比每一个option是否存在于ids中,存在就删除
    $.each($(".AllRoles option"),function(index,option){
        console.log(option);
        if($.inArray($(option).val(),ids)>=0){
            $(option).remove();
        }
    });
});
//在提交表单的时候,选中所有左边下拉框中的option
$(function(){
    $("#editForm").submit(function(){
        $(".selectRoles option").prop("selected",true);
    });
});