代码之家 › 专栏 › 技术社区 › Legion

如何清除所有项,然后在JavaScript中将新项添加到Kendo Multiselect?

kendo-asp.net-mvc kendo-ui javascript

Legion · 技术社区 · 7 年前

我正在打一个ajax电话,得到的答复如下:

[{
  Value: "val1",
  Text: "text1"
}, {
  Value: "val2",
  Text: "text2"
}, {
  Value: "val3",
  Text: "text3"
}, {
  Value: "val4",
  Text: "text4"
}]

我试图用这个答案中描述的方法添加它: Adding items to a Kendo multiSelect

我将代码修改为:

var multiSelect = $("#mySelect").data("kendoMultiSelect");

// Read original data content
var multiData = multiSelect.dataSource.data();
for (var i = 0; i < response.length; i++) {
  // insert new element into copy of multiselect data
  multiData.push({
    text: response[i].Text,
    value: response[i].Value
  })
}
// Write back the modified data
multiSelect.dataSource.data(multiData);

但是,以这种方式添加的所有新选项都显示为 undefined . 我已经 console.log '天 response 来确认里面有数据。

我在multiselect API中也找不到像 clear() 或 removeAll . 只是一个 remove 那就需要你把每一个 dataItem 在移除之前。我错过了更好的方法吗?

1 回复 | 直到 7 年前

Sangram Nandkhile Viktor Klang 7 年前

要清除选项,请使用

multiSelect.dataSource.data([]);

查看下面的演示。

$(document).ready(function() {
            // create MultiSelect from select HTML element
            var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");
          
            $("#btn").click(function() {
              var multiSelect = $("#required").data("kendoMultiSelect");
              var response = [ { Text: "ship 1", Value: "Value1" },{ Text: "ship 2", Value: "Value2" }, { Text: "ship 3", Value: "Value3" },   { Text: "ship 4", Value: "Value4" } ];

              // clear previous data
               multiSelect.dataSource.data([]);
               
              var multiData = []; //multiSelect.dataSource.data();
              for (var i = 0; i < response.length; i++) {
                // insert new element into copy of multiselect data
                multiData.push({
                  text: response[i].Text,
                  value: response[i].Value
                })
              }
              // Write back the modified data
              multiSelect.dataSource.data(multiData);

            });
        });

.demo-section label {
            display: block;
            margin: 15px 0 5px 0;
        }
        #get {
            float: right;
            margin: 25px auto 0;
        }

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/multiselect/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
    

</head>
<body>
<div id="example" role="application">
    <div class="demo-section k-content">
        <h4>Kendo - Multiselect - Append to dataSource</h2>
        <label for="required">Required</label>
        <select id="required" multiple="multiple" data-placeholder="Select attendees...">
            <option>ABC</option>
            <option>XYZ</option>
            <option>PQR</option>
        </select>
        
        <button class="k-button" id="btn">GET Ajax data</button>
    </div>
</div>


</body>
</html>