javascript - 如何获取多选列表框的值(按单击顺序)？

Question

我有一个多选列表框并使用获取所选值的列表

$('[id*=ListBox]').click(function(){

    var selectedItems = $(this).val();
    var lastItem = $("[id*=ListBox] option:selected").last().val();

});

这将返回以逗号分隔的所选值的数组。但问题是数组始终按值排序，而不是按选定值的单击顺序生成。

3000、3005、3009、3011

但是，如果我首先单击值为 3011 的项目，然后单击 3005 ，然后单击 3000 ，最后单击 3009 ，我想要按该顺序排列值

3011、3005、3000、3009

如何按照点击顺序获取选定的值？

编辑

获取最新选择的值也解决了我的问题。

如何获取最近选择的项目？

Answer 1

首先，设置一个事件，每当用户单击时，该事件都会向每个列表框项目添加一个整数。将整数存储在页面上某处的隐藏元素中，或者通过在元素上设置数据属性来执行一些巧妙的操作，如下所示:

$(function() {
    $("#ListBox").data("selected-index", 0);
});

$("#ListBox option").on("click", function() {
    var currentSelectedIndex = $("#ListBox").data("selected-index");
    $(this).data("counter", currentSelectedIndex++);
});

然后为了按照点击顺序获取所有这些:

function getOrderOfItems() {
    var arrayOfSelected = new Array(),

    // Use Math and .map() to get the highest data-counter:

    counters = $("#ListBox option[data-counter]").map(function() {
        return parseInt($(this).data("counter"), 10);
    }).get();

    var highestCounter = Math.max.apply(Math, counters);

    // We have the highest counter, so use a for loop to select the selected options.
    for (var i = 0; i < highestCounter; i++) {
        arrayOfSelected.push($("#ListBox option[data-counter=" + i + "]"));
    }

    console.log(arrayOfSelected);
    return arrayOfSelected;
}

其中 arrayOfSelected 包含按单击顺序排列的 ListBox 项目。