Javascript 如何使用KendoUI在multiselect中获得更改的元素？

我有一个多选列表，作为标签列表的持有者。我似乎不知道如何正确地获取正在更改的项的值，并随更改的事件一起传递。这是我的剑道多选：

        @(Html.Kendo().MultiSelect()
          .Name("tags")
          .Placeholder("No tags selected for this unit")
          .BindTo(new SelectList(Model.TagsAvailable))
          .Events(e => e
                    .Select("select")
                    .Change("change"))
          .Value(Model.TagsSelected.ToArray())
          )

以下是我的js方法：

        function select(e) {
            var dataItem = this.dataSource.view()[e.item.index()];
            var param = dataItem.Text;
            var url = '/UnitDetails/TagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

        function change(e) {
            var dataItem = this;
            var param = dataItem.element.context.innerText;
            var url = '/UnitDetails/UnTagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

---

我的问题是，我觉得param的分配既快又脏。当然，一定有其他更正确的方法来解决这个问题？

要了解这些变化，没有简单的方法。所以，让我们自己做吧

首先，我将使用以下函数保存旧值

function saveCurrent(multi) {
    multi._savedOld = multi.value().slice(0);
}

其中multi是作为参数传递给函数的multi-select，因此可以将函数用于多个multi-select

然后，您需要实现如下更改：

change    : function (e) {
    // Retrieve previous value of `multiselect` saved using previous function
    var previous = this._savedOld;
    // These are current values.
    var current = this.value();
    // Let's save it for the next time
    saveCurrent(this);

    // The difference between previous and current are removed elements
    var diff = $(previous).not(current).get();
    console.log("removed", diff);

    // The difference between current and previous, are added elements
    diff = $(current).not(previous).get();
    console.log("added", diff);
}

---

在这里运行示例

了解这些更改没有简单的方法。所以，让我们自己做吧

首先，我将使用以下函数保存旧值

function saveCurrent(multi) {
    multi._savedOld = multi.value().slice(0);
}

其中multi是作为参数传递给函数的multi-select，因此可以将函数用于多个multi-select

然后，您需要实现如下更改：

change    : function (e) {
    // Retrieve previous value of `multiselect` saved using previous function
    var previous = this._savedOld;
    // These are current values.
    var current = this.value();
    // Let's save it for the next time
    saveCurrent(this);

    // The difference between previous and current are removed elements
    var diff = $(previous).not(current).get();
    console.log("removed", diff);

    // The difference between current and previous, are added elements
    diff = $(current).not(previous).get();
    console.log("added", diff);
}

---

在这里运行示例

回答得很好！非常有用和有用

我也有Nickla的问题。 但是，我需要在数据绑定事件中保存当前值。它可以记录更改的值

如果您开始删除一个项目，它将失败，因为函数将更改识别为项目添加

这就是我所做的

function dataBound(ev) {

        saveCurrent(this);
    }

    function saveCurrent(multi) {
        multi._savedOld = multi.value().slice(0);
    }

    function change(ev) {


        var previous = this._savedOld;

        var current = this.value();

        saveCurrent(this);

        var diff = $(previous).not(current).get();
        console.log("removed", diff);

        var removedSkill = diff;

        console.log("removedSkills", removedSkill);

        diff = $(current).not(previous).get();
        var addedSkill = diff;
        console.log("added", diff);
        console.log("addedSkills", addedSkill);

        if (addedSkill.length > 1 || removedSkill.length > 1) {

            if (addedSkill.length > 1) {

                addedSkill = addedSkill[addedSkill.length - 1];
                alert("Added skill code: " + addedSkill.toString());
            }

            if (removedSkill.length > 1) {
                removedSkill = removedSkill[removedSkill.length - 1];
                alert("Removed skill code: " + removedSkill.toString());
            }
        }
        else {
            if (addedSkill.length > 0) {
                alert("Added skill code: " + addedSkill.toString());
            }
            if (removedSkill.length > 0) {
                alert("Removed skill code: " + removedSkill.toString());
            }
        }


        $.ajax({
            url: "SomeUrl",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({ removedSkill: removedSkill, addedSkill: addedSkill })
        });
    }

再次感谢

---

伊万

回答得好，奥纳白！非常有用和有用

我也有Nickla的问题。 但是，我需要在数据绑定事件中保存当前值。它可以记录更改的值

如果您开始删除一个项目，它将失败，因为函数将更改识别为项目添加

这就是我所做的

function dataBound(ev) {

        saveCurrent(this);
    }

    function saveCurrent(multi) {
        multi._savedOld = multi.value().slice(0);
    }

    function change(ev) {


        var previous = this._savedOld;

        var current = this.value();

        saveCurrent(this);

        var diff = $(previous).not(current).get();
        console.log("removed", diff);

        var removedSkill = diff;

        console.log("removedSkills", removedSkill);

        diff = $(current).not(previous).get();
        var addedSkill = diff;
        console.log("added", diff);
        console.log("addedSkills", addedSkill);

        if (addedSkill.length > 1 || removedSkill.length > 1) {

            if (addedSkill.length > 1) {

                addedSkill = addedSkill[addedSkill.length - 1];
                alert("Added skill code: " + addedSkill.toString());
            }

            if (removedSkill.length > 1) {
                removedSkill = removedSkill[removedSkill.length - 1];
                alert("Removed skill code: " + removedSkill.toString());
            }
        }
        else {
            if (addedSkill.length > 0) {
                alert("Added skill code: " + addedSkill.toString());
            }
            if (removedSkill.length > 0) {
                alert("Removed skill code: " + removedSkill.toString());
            }
        }


        $.ajax({
            url: "SomeUrl",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({ removedSkill: removedSkill, addedSkill: addedSkill })
        });
    }

再次感谢

伊万