W2UI multi select 未返回最新值

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 函数以获取最新的 select 项列表时，最后一项丢失了。

我尝试在 onAdd 和 onRemove 选项上添加一个简单的警报框，我看到的是，这些警报出现在将项目添加到列表之前，即当我关闭警报时, 该项目来自列表 added/removed。

我的要求是，只要 selected 项目的列表发生变化（连同最新的 selected 列表），我想刷新我的图表。

示例案例：

当我 select 列表中的 1 项时，控制台打印“0”项，当我再次 select 2 项时，控制台打印 1 项，依此类推。

Answer 1

你遇到的问题是 W2UI 的 multi select 的所有 event 函数都是 "before" 事件，而不是之后（w2ui 的库在实际事件之前触发事件事件，而不是之后）。

我搜索了 after 事件，但找不到任何事件 - 您可以使用 event 对象来获取有关即将添加到您的当前项目的信息多select.

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); 
}

W2UI multi select 未返回最新值

W2UI multi select not returning the latest value

javascript

jquery

w2ui