Select2下拉框预选中值不显示的问题求助

问题场景 #

项目中使用Select2下拉框，Razor视图和JS初始化代码如下，下拉框能正常拉取后端数据，但执行预选中逻辑时，控制台能输出目标选项，界面却无选中状态。

Razor视图代码 #

<div class="form-group">
    <label class="required-label">Tier</label>
    <select class="form-control" asp-for="PricingTierId" required>
        <option value="">@L("SelectAPricingTier")</option>
        @if (Model.PricingTierId.HasValue)
        {
            <option selected value="@Model.PricingTierId">@Model.PricingTierName</option>
        }
    </select>
</div>

JS初始化代码 #

var _pricingTierDropdown = null;
_pricingTierDropdown = _$form.find('#PricingTierId');

_pricingTierDropdown.select2Init({
    abpServiceMethod: abp.services.app.pricingTier.getPricingTiersSelectList,
    showAll: true,
    allowClear: true
});

尝试的预选中代码（无效） #

if(abp.features.isEnabled('App.PricingTiersFeature')){
    if (!_pricingTierDropdown.val()) {
        abp.services.app.pricingTier.getPricingTiersSelectList("", "").done(function (result) {
            let def = result.items.filter(x => x.name === 'Retail');
            console.log(def);
            _pricingTierDropdown.val(def.id);
            _pricingTierDropdown.trigger('change.select2');
        });
    }
}

问题原因及解决方案 #

1. 修正filter返回值的处理错误 #

filter()方法返回的是匹配元素组成的数组，不是单个对象，直接取def.id会得到undefined，导致设置无效。

修改代码，取数组第一个匹配项：

if(abp.features.isEnabled('App.PricingTiersFeature')){
    if (!_pricingTierDropdown.val()) {
        abp.services.app.pricingTier.getPricingTiersSelectList("", "").done(function (result) {
            // 取第一个匹配的项
            let def = result.items.filter(x => x.name === 'Retail')[0];
            // 先判断是否找到有效项
            if (def) {
                _pricingTierDropdown.val(def.id);
                _pricingTierDropdown.trigger('change.select2');
            }
        });
    }
}

2. 确保Select2完成数据加载后再设置值 #

如果select2Init是异步加载下拉选项，可能设置值的时候，Select2还未完成选项渲染。可以监听select2:loaded事件，确保数据加载完成后执行设置逻辑：

// 监听Select2数据加载完成事件
_pricingTierDropdown.on('select2:loaded', function () {
    if(abp.features.isEnabled('App.PricingTiersFeature') && !_pricingTierDropdown.val()) {
        abp.services.app.pricingTier.getPricingTiersSelectList("", "").done(function (result) {
            let def = result.items.filter(x => x.name === 'Retail')[0];
            if (def) {
                _pricingTierDropdown.val(def.id).trigger('change.select2');
            }
        });
    }
});

3. 使用Select2专属API设置选中值 #

直接调用Select2的select2('val', value)方法，比原生val()更可靠：

if (def) {
    _pricingTierDropdown.select2('val', def.id);
    // 或者结合change事件触发
    // _pricingTierDropdown.select2('val', def.id).trigger('change');
}

4. 校验值的类型匹配 #

确保后端返回的def.id数据类型和下拉框选项的value一致。比如后端返回数字，而Select2选项的value是字符串，需要做类型转换：

_pricingTierDropdown.val(String(def.id)).trigger('change.select2');

内容的提问来源于stack exchange，提问作者Eugene Sukh