jquery - フィルタリングされたオプション配列を追加して選択します: NOT_FOUND_ERR: DOM Exception 8

Question

以下のコードは、簡潔にするために、私が作業しているものを少し切り捨てたバージョンです。うまくいけば、問題を説明するのに十分です。役立つ場合は、jsfiddle をセットアップできますか?

とにかく: jquery オブジェクトの配列を作成し、値が既に選択されている値の配列にあるものを除外し、結果を選択ボックスに追加しようとしています。

問題は、filter() 操作から返されるものにあると思います。オブジェクトの配列として表示されますが、各オブジェクトは「e.fn.e.init[1]」で始まります。そのオブジェクトの配列を選択ボックスに追加しようとすると、NOT_FOUND_ERR: DOM Exception 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 );

フィルタ機能は何を返しますか? get() をどこかで使用する必要がありますか? もしそうなら、どこで使用しますか? 私がやろうとしていることさえできますか？私はこれについてすべて間違っていますか？:)

ありがとう ：）