Selectpicker 已选择第一个选项，但 selectpicker 标题为 "Nothing selected"

Question

我正在使用 Bootstrap 的 select 选择器插件。当 CountryList 发生变化时，我动态地 select 数据库中该国家/地区的现有城市并将数据传输到 CityList。但是，即使第一个选项是 selected，selectpicker 的 header 什么也没说 selected。如果 selected 国家/地区的数据库中有 1 个城市，即使单击该城市，selected 也不会发生任何变化。实际上，我可以得到 city coming selected 的值，但它什么也没说 selected。我该如何解决这个问题？

选择器 SS：

响应SS：

非常感谢您的回答。

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);
        }

Answer 1

首先我们需要在下拉列表中添加选项并刷新 select 选择器，现在我们必须动态 select 第一个选项并再次刷新 select 选择器。这就是 selectpicker 的工作原理。

检查下面的代码

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');

Selectpicker 已选择第一个选项，但 selectpicker 标题为 "Nothing selected"

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

javascript

asp.net-core

bootstrap-selectpicker