DataTables Editor. Changing select option with javascript makes editor never pass a value

cfprogrammer

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);
        } 
    });     
}

allan

You need to use the update() method of the select field type in order to update the options of the select list. You cannot insert your own option elements as Editor adds a custom property with the type safe value (i.e. true really is a boolean true).

Regards,
Allan