无法在 select2 下拉列表中设置预选值

Question

我在我的项目中选择了 2 个下拉菜单

这是如何将其添加到视图中（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
            });

它从 BE 获取值，一切都很好。

但在某些情况下我需要设置预选值

我尝试这样做

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

在控制台中，我得到了这样的选择值，但它没有显示为预选

我该如何解决这个问题？

Answer 1

您可以尝试使用下面更新的代码来设置预选值吗：

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

            // Check if def is not empty
            if (def.length > 0) {
                _pricingTierDropdown.val(def[0].id); // Set the value with the id of the first element
                _pricingTierDropdown.trigger('change.select2');
            }
        });
    }
}