如何将 kendoMultiSelect 选定值存储在数组变量中？答案

【问题标题】：How do I store kendoMultiSelect selected values in an array variable?如何将 kendoMultiSelect 选定值存储在数组变量中？
【发布时间】：2020-02-13 12:28:01
【问题描述】：

我想将下拉列表中的选定值存储到一个数组中，但得到空值。

这是将选定值存储在数组中的正确方法吗？

var selecteddeliverableLists = ko.observableArray();

 function loadDeliverableKeyValuePairs() {
        deliverableKeyValuePairLists.removeAll();
        $.get("/common/packagestatus/get/pairs", function (responseData) {
            var dataArray = deliverableKeyValuePairLists();
            responseData.forEach(function (o) {
                dataArray.push({
                    Id: o.key,
                    Name: o.value
                });
            });
            deliverableKeyValuePairLists.valueHasMutated();
        }).done(function () {
            selecteddeliverableLists =  $("#deliverable__kendo__selection").kendoMultiSelect({
                dataTextField: "Name",
                dataValueField: "Id",
                optionLabel: " -- Select All -- ",
                dataSource: deliverableKeyValuePairLists(),
                index: 0,
                change: filterdeliverable
                //onChangeDeliverableFilter
             });
            });
        selecteddeliverableLists.valueHasMutated();
    }


function filterdeliverable() {
        var newval = selecteddeliverableLists.val();
        console.log(newval);
    }

【问题讨论】：

标签： javascript jquery knockout.js kendo-ui

【解决方案1】：

你得到的值是 element_name.data("kendoMultiSelect").value();

function filterdeliverable() {
        var newval = $("#deliverable__kendo__selection").data("kendoMultiSelect").value();
        console.log(newval);
    }

【讨论】：

【解决方案2】：

您可以使用kendoMultiSelect 的change 事件在进行更改时存储新的值数组。

您可以在change 事件的回调函数中直接使用新数组，也可以稍后使用。

在下面的sn-p中看一个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.917/js/kendo.all.min.js"></script>
</head>
<body>
  
<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
</select>
  
  <button onclick="$('#output').html(values.map(function (value) {return '<li>' + value + '</li>'}))">Update</button>
  <ul id="output"></ul>
<script>
  var values = [];
  
  $("#multiselect").kendoMultiSelect({
    change: function(e) {
      values = this.value();
    }
	});
</script>
</body>
</html>

【讨论】：