Jquery 附加筛选选项数组以选择：未找到\u错误：DOM异常8

为了简洁起见，下面的代码是我正在使用的代码的一个略为截断的版本：希望它足以说明这个问题。如果有帮助的话，我可以设置一个JSFIDLE

总之：我正在创建一个jquery对象数组，然后过滤掉任何值位于已选择值数组中的对象，然后尝试将结果附加到我的选择框中

我认为问题在于我从过滤器操作中得到了什么。它显示为一个对象数组，但每个对象都启动e.fn.e.init[1]。当我尝试将该对象数组附加到选择框时，我得到NOT\u FOUND\u ERR:DOM异常8

过滤函数返回给我的是什么？我是否需要使用“到达某处”，如果需要，在哪里？我能做我想做的吗？我是不是完全错了

谢谢:

var selected_roles = [2,4],
all_roles = [];

// these lines generated from PHP
all_roles.push( $('<option value="3">Doctor</option>') );
all_roles.push( $('<option value="4">Dentist</option>') );
all_roles.push( $('<option value="2">Biscuit Designer</option>') );
all_roles.push( $('<option value="7">International Playboy</option>') );


function getAvailableRoleOptions(){
    var out = all_roles;
    return out.filter( function(element) {
        return $.inArray( parseInt( $(element).attr('value') ), selected_roles ) === -1;
    });
}

$options = getAvailableRoleOptions();

$('#job_select').empty().append( $options );