如何刷新Ajax响应后选择选项列表

Question

我用fastSelect插件http://dbrekalo.github.io/fastselect/我输入的标签，当变化值我做一个AJAX调用到PHP服务器。我的问题是，当我检查的项目，我期待在选项中，我看到了我刚才添加的数据，但在浏览器中不显示，对于我的英语任何帮助的质量对不起吗？

附上我的代码

                    <select id="Recherche_log_commune" name="Recherche[log_commune][]" class="multipleSelectDepCom" multiple="multiple">
                                <optgroup label="Communes">
                                </optgroup>         
                    </select>
                    <script> $('.multipleSelectDepCom').fastselect({maxItems: 10,noResultsText: 'Pas de résultat'}); </script>
                    <script> 
                    $("#leftBlockDashboard .fstQueryInput").on("change paste keyup", function(event) {
                        event.preventDefault();
                        getCommuneAndDepartement($(this).val());
                    });
                    function getCommuneAndDepartement(expression) {
                        var dataString = {expression: expression};
                        $.ajax({
                            url: '{{path('get_commune_departement')}}',
                            type: "POST",
                            data: dataString,
                            success: function(data){
                                $("#Recherche_log_commune").find('optgroup[label="Communes"]').empty();

                                $.each(data, function(){
                                    var option = '<option value="'+ this.com_id +'">'+ this.com_libelle +'</option>';
                                    $("#Recherche_log_commune").find('optgroup[label="Communes"]').append(option);
                                });

                                $('.multipleSelectDepCom').fastselect({
                                    maxItems: 10,
                                    noResultsText: 'Pas de résultat',
                                });
                            }
                        })
                    }
                    </script>

Answer 1

您将需要重新连接控制加载选项后：

$('.selector').fastselect();

更复杂的（以保持选择的值）：

$('.selector').fastselect({
    onItemSelect: function($item, itemModel) {
        //load your stuff
        $('.selector').fastselect();
    }
});

Answer 2

您将需要刷新Ajax调用这样后选择2。

setTimeout(function(){
     $('#select2_id').fastselect();
},500);

Answer 3

OK解决了，很粗鲁，但工程......在这里Ajax回调是我做的：

1）到原来的节点参考......在我的情况下，

var cc = $('#categories');

2）检查是否存在.fstElement

var fsexist = $(".fstElement").length > 0;

3）如果不存在将其取出并reappend原始节点

if (fsexist) {
  $('.fstElement').remove();
  $('#categories_div').append(cc);
}

4）重新初始化固定选择

$('#categories').fastselect({maxItems: 10,
                                        noResultsText: 'Choose categories'});