如何按点击顺序获取多选列表框的值？答案

【问题标题】：How to get values of a multiselect Listbox in order they were clicked?如何按点击顺序获取多选列表框的值？
【发布时间】：2015-08-27 14:06:19
【问题描述】：

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

$('[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

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

编辑

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

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

【问题讨论】：

可以加个demo吗？
获取最近选择的值也解决了我的问题。如何获取最近选择的项目？
您可以保留隐藏输入，并在点击事件时将隐藏字段中的值设置为最新值。
所以在上面的例子中，我点击了值为 3009 的项目。如何获得 3009 值
可以在问题中包含html 吗？

标签： javascript jquery

【解决方案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 项。

【讨论】：

【解决方案2】：

注意，@PaulRoub 的答案中的html 已使用，因为没有html 出现在 OP 中

如果正确解释问题，请尝试用change 事件替换click 事件；创建一个选定值的数组，利用.slice(-2)[0]查看之前选择的项目。

$("#ListBox").data("prev", []).change(function(e) {
  $(this).data().prev.push(this.value)
  console.log($(this).data().prev.slice(-2)[0], // last selected item
      $(this).data().prev) // array of selected items , in order selected
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select id="ListBox" multiple>
  <option value="3000">3000</option>
  <option value="3001">3001</option>
  <option value="3002">3002</option>
  <option value="3003">3003</option>
  <option value="3004">3004</option>
</select>

【讨论】：

【解决方案3】：

这对我有用。我必须采用一个全局数组，并在每次单击后将列表框的选定项目与数组中的元素进行比较。它们之间的差异给了我最新的选择项。

$(document).ready(function () {
            var arr = [];
            $("[id*=listBox]").click(function () {
                var lastItem = '';
                var selArr = [];
                var flag = 0;

                selArr = $(this).val();
               // alert(selArr);
                if ( $(this).val()!=null) {
                    if ($(this).val().length > 2) {

                        lastItem = $(selArr).not(arr).get();

                        selArr = $.grep(selArr, function (value) {
                            return value != lastItem;
                        });
                        flag = 1;
                        //arr = [];
                    }
                }
                arr = selArr;
                $(this).val(selArr);

                if (flag == 1)
                    alert("Cannot select more than 2 items");

            });
        });

这个问题让我发现了两件奇怪的事情。

$("#Listbox option").click() 不会在 Internet Explorer 上触发（我使用的是版本 9）但是在其他人身上效果很好。我不知道为什么选项元素不在在 IE 中获取。
$(#Listbox).val() 给出以逗号分隔的选定值列表排序的顺序，而不是选择项目的顺序。这个事实证明这是一个重大的惊喜和头痛。

【讨论】：