Kendo MVC 下拉菜单 - 删除选项标签时的空格

Question

当用户在 kendo 的下拉菜单中选择任何选项时，我将删除选项标签。在某些下拉菜单中，有空白/空白区域，而不是已删除的选项标签。看起来像： screen

下拉代码：

@(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%" })
)

onCloseDropdown：

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

此外，根据您的用例，由于您仅在关闭下拉菜单时删除选项标签，如果您有一个视图，其中下拉列表填充了加载时的选择，它仍然具有选项标签。如果您不希望这样，您可以从 dataBound 事件中调用相同的隐藏选项标签代码

编辑：

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

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

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