拖动事件后更新jQuery中jqxListBox的列表

Update list for jqxListBox in jQuery upon drag event

本文关键字：jqxListBox 列表 jQuery 事件 更新 拖动      更新时间：2023-09-26

问题：

我使用的jqxListBox来自http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/index.htm我在弄清楚一旦用户重新排序了项目，如何更新列表时遇到了问题。

当前状态：

当用户重新排序项目时，不打印更新的项目顺序（第一个问题）。完成后，我想将当前列表发送到PHP页面（第二个问题）。

JS代码：

<script type="text/javascript">
    $(document).ready(function () {
        var theme = getDemoTheme();
        var data1 = ['skin', 'intelligence', 'weight', 'volume'];
        // Create a jqxListBox
        $("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, source: data1, width: 315, height: 150, theme: theme});
        $("#listBoxA").on('dragEnd', function () {
            // Get all items.
            var items = $("#jqxWidget").jqxListBox('getItems');
            // Get selected indexes.
            var selectedIndexes = $("#jqxWidget").jqxListBox('selectedIndexes');
            var selectedItems = [];
            // Get selected items.
            for (var index in selectedIndexes) 
            {
                if (selectedIndexes[index] != -1) 
                {
                    selectedItems[index] = items[index];
                }
            }
            $("#map_canvas").val(selectedItems); 
        });
    });
</script>

所需输出：

当用户更改了项目的顺序时，当前列表应该作为POST变量发送到PHP页面。

改为使用getSelectedItems方法怎么样？它返回所选项目的数组。

var items=$（"#jqxListBox"）.jqxListBox（'getSelectedItems'）；

该数组的每个成员都有"label"answers"value"选项，其中label是项的文本，value是项的值。

相关文章：