How to get an array of all selected values of all dropdownlists in div

Here's what I'm trying to parse with jQuery:

<tr>
    <td>5</td>
    <td>abc@abc.com</td>
    <td>asdfasdf asdfasdf</td>
    <td>
        <div class="roleoption">
            <img src="/Public/images/delete.png" alt="delete" />
            <select id="role" name="role">
                <option value="1">Anonimo</option>
                <option value="2">Registrado</option>
                <option value="3">Tecnico</option>
                <option value="4">Empresario</option>
                <option selected="selected" value="5">Editor</option>
                <option value="6">Financias</option>
                <option value="7">Administrador</option>
            </select>
        </div>
        <img class="add-role" src="/Public/images/add.png" alt="add" />
    </td>
</tr>

And the javascript code:

             select  td       tr       get the first td's value?
var userId = $(this).parent().parent().select

That's just for getting the user id, I can't seem to figure out how to select elements.

Then I need to grab each .val() of every select inside the td. Something like:

$(this).parent().find('select').each().val();??

How can I wrap this code up and return something like:

//Save array of values: { user: 4, roles { rol: 1, rol: 3, rol: 6 } }

I intend to use this array of values in an ajax request.