[jQuery] Variable Scope Help

[jQuery] Variable Scope Help


Hello All,
I'm running into some issues where I'm alittle confused about the
scope of my variables.
I have this code:
$(function(){
var categoryID;
//Aloha Item Category Dropdown Selection
    //Takes the Selected Value and adds it to Item Search Ending
    $("#add-item select[name='CategoryId']").change(function(){
        categoryID = $("#add-item select[name='CategoryId'] :selected").val
();
        return categoryID;
    });
//Item Search for food name
    $("#add-item #ITEMNAME").autocomplete("<?= site_url('aloha/
item_search'); ?>/"+categoryID, {
        selectFirst: false,
        formatItem: formatItem,
        formatResult: formatResult
    }).result(function(row, item, data) {
        $('#add-item #ITEMNAME').val(item[0]);
        $('#add-item #ITEMID').val(item[1]);
    });
}
What I'm trying to do is take a selection value from a drop down menu
and append the value to the end of the URL in the auocomplete plugin.
For some reason I'am not able to get this to work. Whenever I view
the AJAX request it says that the value is undefined. But if I put a
console.log() into where I select the value it comes up correctly. I
believe its the way i'm defining the vairables scope. THank you for
the help!