從多選中獲取最近選擇的列表框項目

Question

我有一個允許多選的項目列表框。 我正在嘗試選擇最新的最新商品，而不是訂單值，而是用戶最后選擇的商品。

如果我嘗試打印出.val() ， .val()得到所選值的列表，但我需要最新的值（val（）中的最后一個）。

我嘗試使用:last像這樣：

$("#MainContent_lbTeams option:selected:last").val();

但是last在ID的升序到降序上起作用，當有人選擇一個值時，按時不起作用。

例如，如果我有一個包含4個項目的列表框。 如果我按升序選擇它們，則上面發布的內容將正確打印。 但是，如果我單擊第一個，然后單擊第四個，然后返回到第二個，我上面發布的內容將打印第四個項目（即使我最近選擇了第二個）。

//when a team is selected
//tell the user what this does to the record
$("#MainContent_lbTeams").on('change', function () {
    //was a value selected?
    var latest_value = $("#MainContent_lbTeams option:selected:last").val();
    var latest_text = $("#MainContent_lbTeams option:selected:last").text();
    alert(latest_value);
    alert(latest_text);
    if ($("#MainContent_lbTeams :selected").length > 0) {
        $("#MainContent_lblTeamMembers").text("Members of '" + latest_text + "':");
        // act only when the returned promise is resolved
        PopulateMembers(latest_value).then(function () {
            $("#MainContent_lbMembers_chosen a").removeClass("search-choice-close");
        });
    }
});

還有什么我可以用來選擇多選列表框的最新選定值的嗎？

Answer 1

不知道是否有更好的方法，但因為它是多，你可以找到對象的數組中的所有添加的那些added並刪除那些removed 。

$('select').on('change', function () {
    var latest_value = $(this).data('value') || {},
        latest_text = $(this).data('text') || {},
        new_value = {},
        new_text = {},
        added = [],
        removed = [];

    $("option:selected", this).each(function(){
        new_value[$(this).val()] = true;
        new_text[$(this).text()] = true;
        if($(this).val() in latest_value){
            delete latest_value[$(this).val()];
            delete latest_text[$(this).text()];
        }else{
            added.push({value: $(this).val(), text: $(this).text()});
        }
    });

    for(v in latest_value){
        removed.push({value: latest_value[v], text: latest_text[v]});
    }

    console.log('added', added);
    console.log('removed', removed);

    $(this).data({value: new_value, text: new_text});
});

演示

Answer 2

我最終做了一些不同的事情。 鑒於將多重選擇的.val（）存儲為數組，我考慮了兩個數組之間的區別。 我最終得到的是：

            var myTeam = [];
        $("#trMembers").hide();
        $("#MainContent_lbTeams").on('change', function () {
            //was a value selected?
            //store the difference of what teams are selected vs myTeam[]
            var diff = [];
            jQuery.grep($("#MainContent_lbTeams").val(), function (el) {
                if (jQuery.inArray(el, myTeam) == -1) diff.push(el);
            });

            if (diff.length > 0) {
                var latest_value = diff; //has the latest selected value
                var latest_text = $("#MainContent_lbTeams option[value='" + diff + "']").text(); //stores the text
                if ($("#MainContent_lbTeams :selected").length > 0) {
                    $("#dTeamNotice").show();
                    $("#MainContent_lblTeamMembers").text("Members of '" + latest_text + "':");
                    // act only when the returned promise is resolved
                    PopulateMembers(latest_value).then(function () {
                        $("#MainContent_lbMembers_chosen a").removeClass("search-choice-close");
                        $("#trMembers").fadeIn();
                    });
                } else {
                    //hide it...
                    $("#dTeamNotice").css("display", "none");
                    $("#trMembers").hide();
                }
            }
            myTeam = $("#MainContent_lbTeams").val();
        });