Allow user to select role from front end edit profile form

Question

I have a front end edit profile form working fine (thanks to previous answers)

I'm having trouble adding a form element that lets the user change their role.

I've tried adding:

                        <label for="user-role">Role</label>
                        <input class="user-role" name="user-role" type="text" id="user-role" value="contributor" />
                    </p><!-- .form-user-role -->

together with -

        update_user_meta( $current_user->ID, 'wp-capabilities', esc_attr( $_POST['user-role'] ) );

or

        update_user_meta( $current_user->ID, 'role', esc_attr( $_POST['user-role'] ) );

and various things like -

$u = new WP_User( $current_user->ID );
// Remove role
$u->remove_role( 'subscriber' );
// Add role
$u->add_role( 'contributor' );
OR
$current_user = wp_get_current_user();
$current_user->set_role('contributor');
OR
update_user_meta( $current_user->ID, 'wp_capabilities', 'contributor', true );
update_user_meta( $current_user->ID, 'wp_capabilities', array( 'contributor' => 1 ) );
}

Still no luck, obviously I'm not quite grasping this. Can role not be set in the same way as the other fields?

Any help would be much appreciated.