如何在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调用之后刷新select2。

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

Answer 3

好的解决了，非常粗鲁但工作......在ajax回调这里是我做的：

1）获取对原始节点的引用...在我的情况下它是

var cc = $('#categories');

2）检查.fstElement是否存在

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

3）如果存在则删除它并重新连接原始节点

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

4）重新启动快速选择

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