Selectpicker first option selected but selectpicker title is "Nothing selected"

I am working using Bootstrap's selectpicker plugin. When the CountryList changes, I dynamically select the existing cities of that country in the database and transfer the data to the CityList. But even if the first option is selected, the header of selectpicker says nothing selected. And if there is 1 city in the database of the selected country, nothing selected does not change even if that city is clicked. Actually, I can get the value of city coming selected, but it says nothing selected. How can I solve this?

Selectpicker SS :

Response SS:

Thank you very much in advance for your answers.

CountryList change function

$("#CountryList").change(function() {
            var countryId = $('#CountryList option:selected').val();
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetCities", "Project")",
                data: { countryId: countryId },
                dataType: "text",
                success:
                    function(response) {
                        var parsedResponse = jQuery.parseJSON(response);
                        console.log(parsedResponse);
                        var option = "";
                        for (var i = 0; i < parsedResponse['cityList'].length; i++) {
                            if (i == 0) {
                                var city = parsedResponse['cityList'][i].text;
                                var cityId = parsedResponse['cityList'][i].value;
                                option += `<option selected value="${cityId}">${city}</option>`;
                            } else {
                                var city = parsedResponse['cityList'][i].text;
                                var cityId = parsedResponse['cityList'][i].value;
                                option += `<option value="${cityId}">${city}</option>`;
                            }
                        }
                        $("#CityList").html(option);
                        $("#CityList").selectpicker('refresh');
                    }
            });
        });

Project Controller GetCities Action

[HttpPost]
        public async Task<JsonResult> GetCities(int countryId)
        {
            var model = new AddProductViewModel();
            var cityList = await _cityService.GetAllAsyncByCountryId(countryId);
            model.CityList = new SelectList(cityList, "Id", "Name");
            var firstCity = cityList.First();
            model.CountryDefaults = await _countryDefaultService.GetAllAsyncByCountryCityId(countryId, firstCity.Id);
            model.CountryDefault = _countryDefaultService.GetByCountryCityId(countryId, firstCity.Id);
            JsonConvert.SerializeObject(model);
            return Json(model);
        }

First we need to append the options in dropdown and refresh the selectpicker, now we have to dynamically select the first option and again refresh the selectpicker. That how selectpicker is working.

Check the below code

var option = "";
for (var i = 0; i < parsedResponse['cityList'].length; i++) {
    var city = parsedResponse['cityList'][i].text;
    var cityId = parsedResponse['cityList'][i].value;
    option += `<option value="${cityId}">${city}</option>`;
}
$("#CityList").html(option);
$("#CityList").selectpicker('refresh');
$("#CityList").val($('#CityList option:first').val());
$("#CityList").selectpicker('refresh');