Bootstrap Select drop list moves down ward automatically

Question

I am Bootstrap Select user in IE11.

When I fill data with ajax and open it then it automatically move down wards and when I select any value then it's not selected. How can I remove this error?

jQuery.ajax({
        url: base_url + "UserBusinesses/ajaxState/" + countryId,
        dataType: 'json',
        beforeSend: function () {
            $('#UserBusinessStateId').html('<option value="">Loding... </option>');
            $('#UserBusinessStateId').selectpicker('refresh');
            $('#UserBusinessCityId').html('<option value="">Select city</option>');
            $('#UserBusinessCityId').selectpicker('refresh');
        },
        success: function (obj) {
            var addHtml = '';
            addHtml += '<option value="">Select state</option>';
            $.each(obj, function (key, value) {
                var selected = "";
                if (selectedState == key) {
                    var selected = "selected='selected'";
                }
                addHtml += "<option value='" + key + "' " + selected + ">" + value + "</option>";
            });
            jQuery("#UserBusinessStateId").html(addHtml);

            $('#UserBusinessStateId').selectpicker('refresh');

        }
    });

Answer 1

I am facing this issue In IE and I have find the solution

 $('#UserBusinessStateId').selectpicker('refresh');

remove this and add this code

$('#UserBusinessStateId').selectpicker('render').selectpicker('refresh');