Kendo UI - MultiSelect 从外部文件替换动态创建的数据源

Question

如何从外部 .js 文件替换 Kendo UI MultiSelect 数据源值...

PS：实际值来自 index.html 文件，如下所示：

index.html

<select multiple="multiple" class="city_fields initi-select-218" id="test">
</select>

var data = [
     "New Jersey",
     "San Francisco",
     "Las Vegas",
     "Chicago",
     "Los Angeles",
     "New York"
];

jQuery(".city_fields").kendoMultiSelect({
  dataSource: data,
  filter: "contains",
});

我正在尝试从 init.js（外部）文件中替换以上值，如下所示...

init.js

尝试了选项 1：

var newData = ["Delhi",  "Bangalore"];
jQuery(".initi-select-218").kendoMultiSelect({
    dataSource: newData,
    filter: "contains",
    placeholder: "Select",
});

尝试了选项 2：

var newData = ["Delhi", "Bangalore"];
$("#test").kendoMultiSelect({
    dataSource: newData,
    filter: "contains",
    placeholder: "Select",
}); 
$("#test").setDataSource(new kendo.data.DataSource({ data: newData }));

尝试了选项 3：

var newData = ["Delhi",  "Bangalore"];
var multiselect = $("#test").data("kendoMultiSelect");
multiselect.setDataSource(new kendo.data.DataSource({ data: newData }));

对于选项 2 和 3，我收到错误消息

Uncaught TypeError: $(...).setDataSource is not a function...

但是，它仍然从 index.html 文件中获取值

Answer 1

这是因为您有 jquery 选择器 css class。 kendo multiselect 也将相同的 class 应用于包装器。

<div class="k-widget k-multiselect k-header city_fields initi-select-218" unselectable="on" title="" style="">
    ...
    <select multiple="multiple" class="city_fields initi-select-218" data-role="multiselect" aria-disabled="false" aria-readonly="false" style="display: none;">
        ...
    </select>
</div>

改为使用 id 属性：

<select id="multiselect" multiple="multiple" class="city_fields initi-select-218"></select>
<script>
    $("#multiselect").kendoMultiSelect({...});
    var multiselect = $("#multiselect").data("kendoMultiSelect");
    ...
</script>

更新工作示例：http://dojo.telerik.com/iHoDU/2

Kendo UI - MultiSelect 从外部文件替换动态创建的数据源

Kendo UI - MultiSelect replace dynamically created dataSource from external file

jquery

kendo-ui

kendo-dropdown

kendo-multiselect