jQuery在Ajax成功回调中被忽略

Question

我正在使用jQuery和Ajax来填充选择。 现在我正在尝试在成功回调中执行此操作，但是它被忽略了

奇怪的是我的console.log（'test'）; 在我的成功回调中起作用，但是我的DOM操作却没有。 而且我的DOM操作在成功回调之外进行。

对我来说似乎很神奇。 这是代码

$(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>');

        }
    });
});

}）;

编辑

似乎selectize.js引起了问题。 我要研究为什么selectize.js导致了这一点。

Answer 1

我会与select插件共享我的历史记录：一些Select插件，例如SelectBox，要求您在再次填充select或更改任何内容之前确实销毁了jquery对象，甚至selectedIndex都需要再次将select声明为select插件（例如selectBox，但在其他方面相同）

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

另外，请确保在调试时确保$('select[name="service"]')返回所需的select而不是空对象，在调试模式下（不使用调试模式？请使用Chrome Developer工具在来源标签）。