I have a form in which I am changing the values of a select input (entityID) based on the users choice in another select input (entity) . The display of the form work just as expected but regardless of what the user selects in EntityID a null is always passed.

Below is the code I am using the change the options, and visibly it is working as expected but when the "update" button is pressed I see that nothing is ever getting passed in the ajax call (see screenshot) working example at http://fhp-dev.longthoughtsolutions.com/entity.htm

$('#DTE_Field_entity').on('change',function(){
        loadEntityOptions($(this).val(),data);
    });

function loadEntityOptions(entity,data){
    var optionList = "<option value=''>Select an Entity</option>";
    data = JSON.parse(data);
    $.ajax({
        type: 'get',
        url: '/webService/Person.cfc',
        data: {method:'getEntityOptions'
            , entity: entity
                },
        dataType: 'json',
        async: false,
        success: function(result){
            $('#DTE_Field_entityID').empty();

            for(var i=0;i<result.length;i++){
                optionList += "<option value='" +result[i].entityID+ "'>" +result[i].entityName+ "</option>";
            }
            $('#DTE_Field_entityID').html(optionList);
            setTimeout(function(){
                if(entity == data.entity){
                    $('#DTE_Field_entityID').val(data.entityID);
                }
            },100);
        } 
    });     
}