javascript - JQuery 从 @Html.DropDownListFor asp.net mvc 多选下拉列表框获取最后更改的值

Question

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

我正在创建一个带有多选复选框的下拉列表框(excludedPeople)，以及其他两个列表框(PrimaryPerson，secondaryPerson)以相同的形式。所有三个列表框在表单加载期间都具有相同的数据集。如果选中了 exceptedPeople 中的任何项目(选中)，我需要从 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

嗯，等了两天，我自己做了一个解决方案，并将其发布在这里，以便其他人可以使用它。

我为多选下拉列表框编写了这段代码，每个列表项中都有复选框。我希望这适用于类似的控件，例如选中的列表框，但尚未对其进行测试。

我遵循注册控制并通过事件获得通知，因此可以无缝使用而无需了解细节。

用法:

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;
};