javascript - W2UI多选不返回最新值

Question

我正在使用W2UI's multi select选择项目。我已从我的服务器填充了列表，其中包含大约 800 个项目。

$('#enum').w2field('enum', { 
                    items: arrDish, 
                    openOnFocus: true,
                    //onNew: displayValue,
                    onAdd: displayValue,
                    //markSearch:true,
                    onRemove: function (event) {
                        alert("removed");

                    },

                    renderItem: function (item, index, remove) {
                        var html = remove + '<span class="fa-trophy" style="'+ pstyle +'; margin-left: -4px;"></span>' + item.text;
                        //displayValue();
                        return html;


                    },
                    renderDrop: function (item, options) {
                        return '<span class="fa-star" style="'+ pstyle +'"></span>' + item.text;

                    }


                });
                function displayValue() { 
                    console.log($('#enum').data('selected'));
                    selectedDish=getCol($('#enum').data('selected'),'text');
                    console.log(selectedDish); // am getting the values in the console log here but without the latest item
                }
                //below function is also working properly
                function getCol(matrix, col){
                    var column = [];
                    for(var i=0; i<matrix.length; i++){
                        column.push(matrix[i][col]);
                    }
                    return column;
                }

问题是，当我执行 displayValue 函数来获取最新的所选项目列表时，最后一个项目丢失了。

我尝试在 onAdd 和 onRemove 选项上添加一个简单的警报框，我可以看到的是，这些警报出现在将项目添加到列表中之前，即当我关闭警报，该项目已从列表中添加/删除。

我的要求是，每当所选项目的列表发生更改(以及最新的所选列表)时，我想刷新我的图表。

示例案例:

当我在列表中选择 1 个项目时，控制台会打印“0”个项目，当我选择 2 个项目时，控制台会打印 1 个项目，依此类推。

Answer 1

您遇到的问题是，W2UI 的多选的所有 event 函数都是“之前”事件，而不是之后(w2ui 的库在实际事件之前触发事件，而不是之后) )。

我搜索了 after 事件，但没有找到任何内容 - 您可以使用 event 对象来获取有关即将发生的当前项目的信息添加到您的多项选择中。

function displayValue(e) {
    console.log($('#enum').data('selected'));
    consloe.log(e.item);
}

Note the e parameter in the function name displayValue(e)

使用您当前的代码，我刚刚将新项目添加到 selectedDish 数组中:

function displayValue(e) {
    // The item that we got in this event:
    console.log(e.item);

    // The data we selected before the selection of the new item
    console.log($('#enum').data('selected'));

    // Array of the current selected items
    selectedDish=getCol($('#enum').data('selected'),'text');

    // Add the text of the item we selected
    selectedDish.push(e.item.text)

    // Now the selectedDish contains all the values, including the last one that was selected
    console.log(selectedDish); 
}