Selectpicker 选择了第一个选项，但 selectpicker 标题是“未选择”

Posted 2023-05-08

【中文标题】Selectpicker 选择了第一个选项，但 selectpicker 标题是“未选择”

【英文标题】：Selectpicker first option selected but selectpicker title is "Nothing selected"

【发布时间】：2021-07-15 16:59:18

【问题描述】：

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

选择器 SS：

回复 SS：

非常感谢您的回答。

国家/地区列表更改功能

$("#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');
                    
            );
        );

项目控制器 GetCities 操作

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

【问题讨论】：

您可以尝试将选定的值存储在变量中，并使用jQuery.selectpicker.util.change( $("#CityList"), preSelectedValue ); 在选择器中设置选项

对不起，我试过你说的方法，还是不行。

***.com/questions/14804253/… 也许问题在于您在选择器刷新之前如何设置选择框的选定值最初$('#CityList').val(1);

感谢您的帮助。我的意思是，实际上，我可以选择 city 的值，但它没有说明选择。我该如何解决这个问题？

你能更新代码或添加它吗？

【参考方案1】：

首先我们需要在下拉列表中添加选项并刷新选择器，现在我们必须动态选择第一个选项并再次刷新选择器。这就是 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');