Can not select filter item after reresh data from ajax

[lchhieu]

• Search and select search items works normally the first time
• Load new data from ajax and append to select box . Refresh Duallistbox
• Search and can not select search items

[caffeinatedMike]

I'm currently running into this scenario. Did you ever find a fix or workaround? I tried re-instantiating the instance, but that didn't help. Below is my implementation:

<script>
        $(function () {
            //Bootstrap Duallistbox
            $('.duallistbox').bootstrapDualListbox({
                nonSelectedListLabel: 'Available Master Columns',
                selectedListLabel: 'Selected Master Columns'
            })

            var container = $('.bootstrap-duallistbox-container');
            container.addClass('d-none');

            $('#fetch_columns').on('click', function(e) {
                var project = $('#project').val();
                var dataset = $('#dataset').val();
                var mast_prod = $('#master_product_table').val();
                if (project != '' && dataset != '' && mast_prod != ''){
                    $(this).attr('disabled', true);
                    $.post(
                        "{{ url_for('api.system_defaults') }}",
                        {project: project, dataset: dataset, mast_prod: mast_prod},
                        function(data){
                            var select = $('select#required_master_columns.duallistbox');
                            if(select.prop) {
                              var options = select.prop('options');
                            } else {
                              var options = select.attr('options');
                            }
                            $('option', select).remove();

                            $.each(data, function(index, node) {
                                options[index] = new Option(node.text, node.id);
                            });
                            select.bootstrapDualListbox('refresh', true);
                            // i've also tried re-instantiating it: 
                            // select.bootstrapDualListbox('destroy');
                            // $('.duallistbox').bootstrapDualListbox({
                            //          nonSelectedListLabel: 'Available Master Columns',
                            //          selectedListLabel: 'Selected Master Columns'
                            //  })
                            container.removeClass('d-none');
                        }
                    );
                }
            });
        });
    </script>

@istvan-ujjmeszaros any ideas?