用于从@Html.DropDownListFor asp.net mvc获取上次更改的值的JQuery多选下拉列表框

Question

如何使用Jquery查找最后选中/未选中的项，以便可以在其他两个列表框中添加或删除它们？

我正在创建一个带有多选复选框的下拉列表框(ExcludedPeople)，其中还有两个相同形式的列表框(PrimaryPerson，secondaryPerson)。在表单加载期间，所有三个列表框都具有相同的数据集。如果excludedPeople中的任何项目被选中(选中)，我需要从PrimaryPerson和secondaryPerson中删除该项目，反之亦然。

ASP.Net MVC多选下拉列表框代码：

 @Html.ListBoxFor(m => m.ExcludedPeople, Model.AllPeopleListViewModel,
                        new { @class = "chkDrpDnExPeople" , @multiple = "multiple"})

jQuery代码：

$(".chkDrpDnExPln").change(function ()
        {
            console.log("Trigger" + $(this).val()); //this code gets the list of all items selected. What I need is to log only last selected/unselected item's val & text into the console.
        });

任何帮助都是非常感谢的。如果有问题，请提出来。

Answer 1

好了，等了两天后，我自己做了一个解决方案，并把它贴在这里，以便其他人可以使用它。

我为多选下拉列表框编写了这段代码，每个列表项中都有复选框。我希望它能在类似的控件上工作，比如checked listbox，但还没有测试过。

我遵循了寄存器控制，并通过事件得到通知，因此可以无缝地使用，而不需要深入了解细节。

用法：

1)将“基于JQuery的库”部分作为共享或相同的js脚本文件包含到您的项目中。

2)使用以下方式消费该功能。当控件选择发生更改时，该事件将为您提供更改后的值。

RegisterSelectedItemChangeEvent("chkDrpDnctrl#1");
RegisterSelectedItemChangeEvent("chkDrpDnctrl#2");
RegisterSelectedItemChangeEvent("chkDrpDnctrl#3");

$(".chkDrpDnctrl").on("OnSelectionChange", function (e,eventData)
        {
            var evntArgs = {
                IsDeleted: false,
                IsAdded: false,
                AddedValues: [], //null if no change/None. Else changed value.
                DeletedValues: [] //null if no change/None. Else changed value.
            };
            var source = e;
            evntArgs = eventData;
            var elementnm = $(this).attr("id");
            if (evntArgs !== "undefined" && elementnm != "")
            {
                if (evntArgs.IsAdded == true)
                {
                    //if excluded checked then remove.
                    for (var i = 0; i < evntArgs.AddedValues.length; i++)
                    {
                        PerformAction (control#, evntArgs.AddedValues[i]);
                    }
                }
                if (evntArgs.IsDeleted == true)
                {
                    //if excluded checked then remove.
                    for (var i = 0; i < evntArgs.DeletedValues.length; i++)
                    {
                        PerformAction (control#, evntArgs.AddedValues[i]);                    
                  }
                }
            }
        });

基于JQuery的库：

 function RegisterSelectedItemChangeEvent(selector) {
    var dropdownElementRef = selector;
    //Intializes the first time data and stores the values back to control. So if any of the checkboxes in dropdown is selected then it will be processe and added to control.
    $(dropdownElementRef).data('lastsel', $(dropdownElementRef).val());
    var beforeval = $(dropdownElementRef).data('lastsel');
    var afterval = $(dropdownElementRef).val();
    //storing the last value for next time change.
    $(dropdownElementRef).data('lastsel', afterval);
    //get changes details
    var delta = GetWhatChanged(beforeval, afterval);
    //stores the change details back into same object so that it can be used from anywhere regarless of who is calling it.
    $(dropdownElementRef).data('SelectionChangeEventArgs', delta);
    //prepares the event so that the same operation can be done everytime the object is changed.
    $(dropdownElementRef).change(function () {
        var beforeval = $(dropdownElementRef).data('lastsel');
        var afterval = $(dropdownElementRef).val();
        //storing the last value for next time change.
        $(dropdownElementRef).data('lastsel', afterval);
        //get changes details
        var delta = GetWhatChanged(beforeval, afterval);
        //stores the change details into same object so that it can be used from anywhere regarless of who is calling it.
        $(dropdownElementRef).data('OnSelectionChangeEventArgs', delta);
        //fires the event
        $(dropdownElementRef).trigger('OnSelectionChange', [delta]);
        //$.event.trigger('OnSelectionChange', [delta]);
    });
    var initdummy = [];
    var firstval = GetWhatChanged(initdummy, afterval);
    //fires the event to enable or disable the control on load itself based on current selection
    $(dropdownElementRef).trigger('OnSelectionChange', [firstval]);
}


//assume this will never be called with both added and removed at same time.
//console.log(GetWhatChanged("39,96,121,107", "39,96,106,107,109")); //This will not work correctly since there are values added and removed at same time.
function GetWhatChanged(lastVals, currentVals)
{
    if (typeof lastVals === 'undefined')
        lastVals = '' //for the first time the last val will be empty in that case make both same. 
    if (typeof currentVals === 'undefined')
        currentVals = ''
    var ret = {
        IsDeleted: false,
        IsAdded: false,
        AddedValues: [], //null if no change/None. Else changed value.
        DeletedValues: [] //null if no change/None. Else changed value.
    };
    var addedvals;
    var delvals;
    var lastValsArr, currentValsArr;
    if (Array.isArray(lastVals))
        lastValsArr = lastVals;
    else
        lastValsArr = lastVals.split(",");
    if (Array.isArray(currentVals))
        currentValsArr = currentVals;
    else
        currentValsArr = currentVals.split(",");
    delvals = $(lastValsArr).not(currentValsArr).get();
    if (delvals.length > 0)
    {
        //console.log("Deleted :" + delvals[0]);
        for (var i = 0; i < delvals.length; i++)
        {
            ret.DeletedValues.push(delvals[i]);
        }
        ret.IsDeleted = true;
    }
    addedvals = $(currentValsArr).not(lastValsArr).get();
    if (addedvals.length > 0)
    {
        //console.log("Added:" + addedvals[0]);
        for (var i = 0; i < addedvals.length; i++)
        {
            ret.AddedValues.push(addedvals[i]);
        }
        ret.IsAdded = true;
    }
    return ret;
};