Question

我有两个名为 categories 和 selected Categories 的列表框。我在 jQuery 中添加了拖放功能，可以从类别中拖放到所选类别列表框中。即使功能正常，将项目放入所选类别列表框后，我仍然遇到问题。由于我的要求是将选定类别列表框中的所有项目都放置到一个数组中，因此列表框项目计数为returns 0。下面给出了我尝试过的代码段（我尝试过使用for循环和foreach循环）。

Foreach循环示例：

    foreach (DataRowView drv in lbChosen.Items)
        {
            string categoryName = drv.ToString();
        }

对于循环示例：

    for (int i = 0; i < lbChosen.Items.Count; i++)
        {
            string categoryName = lbChosen.Items[i].ToString();
        }

下面给出的

是用于实现拖放功能的代码段。（Taken from this link）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v18.1, Version=18.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE HTML>
<html>
<head runat="server">
<title>How to drag and drop items from/to ASPxListBox using jQuery UI</title>
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.14.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function InitalizejQuery() {
        $('.lbItem').draggable(
            {
                helper: 'clone'
            }
        );

        $('.listBoxLeft, .listBoxRight').droppable(
            {
                activeClass: "hover",
                drop: function (ev, ui) {
                    /* do nothing when the parent == destination */
                    if ($(ui.draggable).parents(".listBoxLeft").length != 0 && ($(this)).hasClass("listBoxLeft") ||
                        $(ui.draggable).parents(".listBoxRight").length != 0 && ($(this)).hasClass("listBoxRight"))
                        return;

                    var itemIndex = $(ui.draggable).parent().index(); // this is a fragile part of the application

                    var fromListBox, toListBox;

                    if ($(this).hasClass("listBoxRight")) { // determine a source and a destination
                        toListBox = lbChosen;
                        fromListBox = lbAvailable;
                    }
                    else {
                        toListBox = lbAvailable;
                        fromListBox = lbChosen;
                    }

                    toListBox.AddItem(fromListBox.GetItem(itemIndex).text,
                                      fromListBox.GetItem(itemIndex).value);

                    fromListBox.RemoveItem(itemIndex);

                    InitalizejQuery(); // repeat the initialization for new items
                }
            }
          );
    }
</script>
<style type="text/css">
    .lbItem
    {
        width: 200px;
    }

    /* like SelectedItem style */
    .ui-draggable-dragging
    {
        background-color: #A0A0A0;
        color: White;
    }

    /* small glowing effect */
    .hover
    {
        -webkit-box-shadow: 0 0 15px #ff0000;
        -moz-box-shadow: 0 0 15px #ff0000;
        box-shadow: 0 0 15px #ff0000;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
    <dx:ASPxGlobalEvents ID="ge" runat="server">
        <ClientSideEvents ControlsInitialized="function (s, e) { InitalizejQuery(); }" />
    </dx:ASPxGlobalEvents>
    <table>
        <tr>
            <td style="width: 35%">
                <dx:ASPxListBox ID="lbAvailable" runat="server" ClientInstanceName="lbAvailable"
                    Width="200px" Height="240px" CssClass="listBoxLeft">
                    <ItemStyle CssClass="lbItem" />
                    <Items>
                        <dx:ListEditItem Text="ASPxEditors Library" Value="ASPxEditors" />
                        <dx:ListEditItem Text="ASPxGauges Suite" Value="ASPxGauges" />
                        <dx:ListEditItem Text="ASPxGridView and Editors Suite" Value="ASPxGridView and Editors" />
                        <dx:ListEditItem Text="ASPxHTMLEditor Suite" Value="ASPxHTMLEditor" />
                        <dx:ListEditItem Text="ASPxperience Suite" Value="ASPxperience" />
                        <dx:ListEditItem Text="ASPxPivotGrid Suite" Value="ASPxPivotGrid" />
                        <dx:ListEditItem Text="ASPxScheduler Suite" Value="ASPxScheduler" />
                        <dx:ListEditItem Text="ASPxSpellChecker" Value="ASPxSpellChecker" />
                        <dx:ListEditItem Text="ASPxTreeList Suite" Value="ASPxTreeList" />
                        <dx:ListEditItem Text="XtraReports Suite" Value="XtraReports" />
                        <dx:ListEditItem Text="XtraCharts Suite" Value="XtraCharts" />
                    </Items>
                </dx:ASPxListBox>
            </td>
            <td style="width: 30%">
            </td>
            <td style="width: 35%">
                <dx:ASPxListBox ID="lbChosen" runat="server" ClientInstanceName="lbChosen" Width="200px"
                    Height="240px" CssClass="listBoxRight">
                    <ItemStyle CssClass="lbItem" />
                </dx:ASPxListBox>
            </td>
        </tr>
    </table>
</div>
</form>

我需要知道为什么我无法将这些项目打印到数组中？我要去哪里错了？提前致谢。

编辑：

<script type="text/javascript">
    function InitalizejQuery() {
        $('.lbItem').draggable(
            {
                helper: 'clone'
            }
        );

        $('.listBoxLeft, .listBoxRight').droppable(
            {
                activeClass: "hover",
                drop: function (ev, ui) {
                    /* do nothing when the parent == destination */
                    if ($(ui.draggable).parents(".listBoxLeft").length != 0 && ($(this)).hasClass("listBoxLeft") ||
                        $(ui.draggable).parents(".listBoxRight").length != 0 && ($(this)).hasClass("listBoxRight"))
                        return;

                    var itemIndex = $(ui.draggable).parent().index(); // this is a fragile part of the application

                    var fromListBox, toListBox;

                    if ($(this).hasClass("listBoxRight")) { // determine a source and a destination
                        toListBox = lbChosen;
                        fromListBox = lbAvailable;
                    }
                    else {
                        toListBox = lbAvailable;
                        fromListBox = lbChosen;
                    }

                    //toListBox.AddItem(fromListBox.GetItem(itemIndex).text,
                    //                  fromListBox.GetItem(itemIndex).value);
                    $("#lbChosen").append(toListBox.AddItem(fromListBox.GetItem(itemIndex).text,
                                      fromListBox.GetItem(itemIndex).value));
                    fromListBox.RemoveItem(itemIndex);

                    //Robson Sousa's code
                    var category;
                    $('#lbChosen_LBT td').each(function () {
                        category = $(this).text();

                    });
                    console.log(category); //tried printing it on console. 

                    InitalizejQuery(); // repeat the initialization for new items
                }
            }
          );
    }
</script>

Answer 1

您可以通过JQuery获得选定类别的值，如下所示：

var categories = [];
var i =0;
$('#lbChosen_LBT td').each(function () {
   categories[i++] = $(this).text();
});
console.log(categories); //tried printing it on console

无法从列表框中获取所有值

1 个答案: