jQuery ignored in ajax success callback

Question

I'm using jQuery and Ajax to populate a select. Now I'm trying to do that in my success callback, But it's being ignored

The weird part is that my console.log('test'); is working in my success callback, But my DOM manipulation isn't. And my DOM manipulation is working outside of the success callback.

seems like magic to me. Here's the code

$(document).ready(function(){

// This is working
//$('select[name="service"]').append('<option selected="selected" value="1">Test</option>');

$('select[name="region"]').change(function(){
    $.ajax({
        type: "GET",
        url: "ajax/updateServices.php",
        data: "region=" + $(this).val(),
        dataType: "html",
        success: function(data){
            // this is also working
            console.log('test');
            // This is being ignored
            $('select[name="service"]').append('<option selected="selected" value="1">Test</option>');

        }
    });
});

});

EDIT

It seems like selectize.js is causing the issue. I'm gonna look into why selectize.js is causing this.

Answer 1

i would share my history with select plugin: Some select plugin such as SelectBox requires you do destroy the jquery object before populating the select again or changing anything, even selectedIndex THAT you need to declare the select as the select-plugin again for example (with selectBox, but works the same on others)

$("#MySelect").selectBox('destroy')
$("#MySelect").append("<option>New Option </option>");
$("#MySelect").selectBox()

also, make sure when debugging, that $('select[name="service"]') returns the desired select and not an empty object, most issues are resolved when in debug mode (dont use debug mode? use Chrome Developer tools under Source tab).