如何在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'});