剑道MVC下拉-删除选项标签时的空白空间

Question

当用户在剑道的下拉列表中选择任何选项时，我将删除选项标签。在一些下拉列表中，有白色/空白空间，而不是删除的选项标签。它看起来像：屏幕

下拉代码：

@(Html.Kendo().DropDownList()
    .Name("apps")
    .DataTextField("Name")
    .DataValueField("Id")
    .OptionLabel("Please select a software")
    .BindTo(Model.Apps)
    .Events(e => {
        e.Close("onCloseDropdown");
    })
    .HtmlAttributes(new { id = "ddApps", style = "width: 30%" })
)

OnClose下拉列表：

function onCloseDropdown() {
    var val = $('#ddApps').val();

    if (val !== "") {
        this.element.getKendoDropDownList().list.find('.k-list-optionlabel').remove();
    }
    else {
        return;
    }
    (...)
}

我注意到，当并没有很多选项并且滚动被禁用时，问题并没有出现。当我有很多选项并且启用了滚动时，我想剑道需要在移除选项标签后以某种方式调整大小以固定高度

Answer 1

尝试隐藏选项标签条目，而不是像这样删除它：

function onCloseDropdown() {
    var val = $('#ddApps').val();

    if (val !== "") {
        this.element.getKendoDropDownList().list.find(".k-list-optionlabel").hide();
    }
    else {
        return;
    }
    (...)
}

此外，根据您的使用情况，由于您仅在下拉列表关闭时移除选项标签，因此如果您有一个视图，其中下拉列表中填充了加载时的选择，则该视图仍将具有选项标签。如果不希望，可以从数据绑定事件调用相同的隐藏选项标签代码

编辑：

另一种选择是，像以前一样执行删除代码，然后像这样刷新下拉列表：

function onCloseDropdown() {
    var val = $('#ddApps').val();

    if (val !== "") {
        this.element.getKendoDropDownList().list.find('.k-list-optionlabel').remove();
        this.element.getKendoDropDownList().refresh();
    }
    else {
        return;
    }
    (...)
}