让JS设置发布数据

I'm currently working a page that lists a lot of users inside a table using a role id. The role id value is gathered using the select dropdown and then pressing submit. This shows the table below with all the users with that specific role. The way this is done is that when the form is submitted, the id is returned inside the $_POST of my select box. What i want to do is not use a submit button at all, I want to be able to scroll through the different roles, and when I click on a different role within the select, it update the table below automatically without needing to post.

Let's say my select box is called role:

<select id="role">

And the options are:

id: 1, name: blah1
id: 2, name: blah2

I have been working on trying to get this work using ajax and posting the data back to PHP using the change function. Here is my code:

$(document).ready(function() {
    $('#role').change(function(){
        var role_id = $('#role').val();
        $.ajax({
            url: 'assign-roles-2.php',
            data: {"roleID":role_id},
            type: 'post',
            success:function(data){
                $('#section').slideDown();
            }
        });
    });
    $('#role').trigger("change");
});

I have this in PHP also:

$role_id = trim($_POST["roleID"]);

But this returns as null. How would I go about getting the value I get from the select input and use it to set this role_id variable in PHP without submitting a form?

I am assuming that your description of your option elements: id: 1, name: blah1 does not reflect their markup and that they are defined like so...

<option value="1">blah1</option>

If so, then the following should work fine.

var role_id = $('#role').find('option:selected').val();