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

时间:2016-12-12 12:03:20

标签: javascript jquery ajax

我使用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>

browser

when i inspect element

3 个答案:

答案 0 :(得分:0)

加载选项后,您需要重新连接控件:

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

更复杂(保留所选值):

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

答案 1 :(得分:0)

你需要像这样在ajax调用之后刷新select2。

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

答案 2 :(得分:0)

好解决了,很不礼貌,但是可以工作...在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'});