如何仅使用 javascript 清除/重置 Kendo DropDownList?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18688967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 12:53:41  来源:igfitidea点击:

How do I clear / reset a Kendo DropDownList with only javascript?

javascriptkendo-uikendo-asp.net-mvc

提问by Josh

I have a Kendo DropDownList (name=Function) that contains 3 options. When one option is selected, it triggers an ajax call to get data to populate a different DropDownList (name=Parents). This works as-expected. However, if the user then changes the original DropDownList "Function" back to a different selection, I need to clear/reset (remove all options) and disable the "Parents" DropDownList.

我有一个包含 3 个选项的 Kendo DropDownList (name=Function)。选择一个选项时,它会触发AJAX调用以获取数据以填充不同的DropDownList(name =父母)。这按预期工作。但是,如果用户随后将原始 DropDownList“Function”更改回不同的选择,我需要清除/重置(删除所有选项)并禁用“Parents”DropDownList。

function LoadKendoDropdownContents(dropdownBoxId, data) {
  var dropdownBox = $("#" + dropdownBoxId).data("kendoDropDownList");

  if (data === "" || data === null || $.isEmptyObject(data)) {
    var dataSource = [];
  }
  else {    
    var dataSource = data;
  }

  dropdownBox.setDataSource(dataSource);
}

It's really the "var dataSource = []" that is giving me problems. It's like the "Parents" DropDownList isn't refreshing/rebinding when that is applied. All of the options except the one that was selected get removed, but how do I remove the one that was previously selected? I want it to be "empty" again.

真正给我带来问题的是“var dataSource = []”。就像“父母”DropDownList 在应用时不会刷新/重新绑定一样。除了被选中的选项之外的所有选项都将被删除,但如何删除之前选择的选项?我希望它再次“空”。

Thank you.

谢谢你。

---- Solution I used ----

----我使用的解决方案----

function LoadKendoDropdownContents(dropdownBoxId, data) {
  var dropdownBox = $("#" + dropdownBoxId).data("kendoDropDownList");

  if (data === "" || data === null || $.isEmptyObject(data)) {
    var dataSource = new kendo.data.DataSource({
      data: []
    });

    dropdownBox.text(" --- ");
    dropdownBox.value(-1);
  }
  else {
    var dataSource = new kendo.data.DataSource({
      data: data
    });

    dropdownBox.text("[Select]");
    dropdownBox.value(-1);
  }

  dropdownBox.setDataSource(dataSource);
}

回答by CodingWithSpike

It might be easier to use the cascading dropdownfeature.

使用级联下拉功能可能更容易。

When you change the dataSource, it removes the dropdown items, but you also need to clear the selected text and disable the box, by calling:

当您更改数据源时,它会删除下拉项,但您还需要清除所选文本并禁用该框,方法是调用:

dropdownBox.setDataSource(dataSource);
dropdownBox.text('');
dropdownBox.enable(false);

回答by Ross Bush

If you have defined a data source for both the parent and child drop down then you could use the cascadeFrom('parent') method in the child and set a value that you can identify as null or clear.

如果您已经为父级和子级下拉列表定义了数据源,那么您可以在子级中使用 cascadeFrom('parent') 方法并设置一个可以标识为 null 或 clear 的值。