how pass selected index value to a change function jquery

Question

I have a select menu that looks like this:

<select id ="cal-category-select">
    <option value="/event-sort/list/2009/9/sports/">Sports Events</option>
    <option value="/event-sort/list/2009/9/fine-arts/">Fine Arts Events</option>
    ...
</select>

when the user selects an option from the select, I need to pass the option value attribute to this function as event data, it's the second parameter:

$('#cal-category-select').bind('change.filter', need_value_attribute_here, update_cal);

the update_cal function referenced receives the data passed in from the second parameter and using to get some ajax content

any idea how I can do that? I haven't been able to get it to work

have tried this...

var category_url = $('#cal-category-select option:selected').attr('value');
$('#cal-category-select').unbind().bind('change.filter', category_url, update_cal);

but that only returns the first option value in the list

Answer 1

$('#cal-category-select').bind('change.filter', function(){
  update_cal($(this).val());
});

Answer 2

You would just use:

$("#cal-category-select").val()

alternative longer syntax:

$('#cal-category-select option:selected').val()

Answer 3

For the selected <option> value, it should just be

$('#cal-category-select').val();