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项。

Answer 2

注意，{@ 1}}来自@PaulRoub使用的答案，因为OP上没有html

如果正确解释问题，请尝试将html事件替换为change事件;创建所选值的数组，使用click查看以前选择的项目。

＆＃13;

.slice(-2)[0]

＆＃13;

$("#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
})

＆＃13;

Answer 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()给出了逗号分隔的选定值列表排序顺序，而不是选择项目的顺序。这个被证明是一个重大的惊喜和头痛。

如何在点击它们的同时获取多选列表框的值？

3 个答案: