Refresh not working after append option selected ajax

[baskara8]

Hi,
I have a problem, to display selected option at first position after append option using ajax, it always show emptyTitle (Select and Begin Typing) at first. not selected option at first

Below my code

$(document).find("#modal_villages #villages_districtsid").selectpicker().ajaxSelectPicker({
    ajax: {
        url: URL,
        dataType: 'json',
    },
    locale: {
        emptyTitle: 'Select and Begin Typing'
    },
    log: 3,
    preprocessData: function(data) {
        var i, l = data.length,
            arr = [];
        if (l) {
            for (i = 0; i < l; i++) {
                if (data[i].districts_id.toLowerCase().indexOf(this.plugin.query) != -1 || data[i].districts_desc.toLowerCase().indexOf(this.plugin.query) != -1) {
                    arr.push($.extend(true, data[i], {
                        text: data[i].districts_desc,
                        value: data[i].districts_id,
                        data: {
                            subtext: data[i].districts_regenciesname
                        }
                    }));
                }
            }
        }
        // You must always return a valid array when processing data. The
        // data argument passed is a clone and cannot be modified directly.
        return arr;
    }
});
$(document).find("#modal_villages #villages_districtsid").append('<option value="' + $(this).data("districtsid") + '" data-subtext="' + $(this).data("districtsname") + '" selected="selected">' + $(this).data("districtsname") + '</option>').selectpicker('refresh');