How to refresh select option list after AJAX response

Question

I use fastSelect plugin http://dbrekalo.github.io/fastselect/ I have input tag, when change value i do a call ajax to php server. My problem is that When I inspect the item and I look in the options, I see the data I just added, but in the browser it does not display, sorry for the quality of my English any help please ?

Enclosed my code

                    <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

You will need to reattach the control after the options are loaded:

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

Even more complicated (to keep the selected value):

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

Answer 2

You Will need to refresh the select2 after ajax call like this.

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

Answer 3

ok solved , very rude but works ... on ajax callback here is what i do:

1) get a reference to original node ... in my case it is

var cc = $('#categories');

2) check if .fstElement exists

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

3) if exists remove it and reappend the original node

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

4) reinit fastselect

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