JQuery для получения последнего измененного значения из @ Html .DropDownListFor asp. net mvc множественный выбор раскрывающегося списка

Question

Как мне использовать Jquery, чтобы найти последний отмеченный / не отмеченный элемент и чтобы я мог добавить или удалить его из двух других списков?

Я создаю раскрывающийся список (исключая людей) с флажком множественного выбора с двумя другими списками (PrimaryPerson, secondPerson) в той же форме. Все три списка имеют одинаковый набор данных при загрузке формы. Если какой-либо элемент в excedPeople выбран (отмечен), мне нужно удалить этот элемент из PrimaryPerson и secondPerson и наоборот.

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

Что ж, после ожидания в течение 2 дней я сам принял решение и разместил его здесь, чтобы другие могли его использовать.

Я сделал этот код для выпадающего списка с несколькими выборками с флажками в каждом элементе списка. Я ожидаю, что это сработает на аналогичных элементах управления, таких как проверенный список, но я не проверял его.

Я следовал за регистрационным контролем и получал уведомления по событиям, чтобы можно было легко использовать его, не вдаваясь в подробности.

Использование:

1) включает в свой проект часть "JQuery based Library" в виде общего или того же файла сценария 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;
};