1

嘿伙计们，我已经在这个问题上停留了几天。我有两个列表框，用户可以在它们之间来回传输数据。我需要右侧列表框中的项目也显示在位于列表框下方表格中的标签中。

我已经获得了要在标签中显示的文本，但我无法让它为每个项目输入一个新行（就像它们会显示在列表框中一样）。文本带有空格，但仍然没有在新行上拆分。我对javascript相当陌生，所以请善待:)

这是我的javascript：

    function displayLabel()
            {
                var item = document.getElementById("lstRightBox").options.innerText;
                var arr = new Array();
                var test = item.split(arr.join("|"));
                document.getElementById("label").innerHTML = test.join("\r\n");
                return true;
            }

添加

这是在列表框之间传输项目的代码：

    // This moves selected items
    function move_list_items(lstLeftBox, lstRightBox)
      {
        $("#"+lstLeftBox+"  option:selected").appendTo("#"+lstRightBox).toString;
      }

      //this will move all items 
    function move_list_items_all(lstLeftBox, lstRightBox)
      {
        $("#"+lstLeftBox+" option").appendTo("#"+lstRightBox);
      }

编辑

这是我的显示功能的更新。我在我的移动函数（上面列出）中调用它，以便每次单击按钮时都会执行它。我目前正在为每个移动的项目在我的标签中显示 [object Object]。

    function displayLabel(lstLeftBox, lstRightBox)
          {
            $("#"+lstRightBox+"  option").each(function(){
                document.getElementById("label").innerHTML += $(this);
            });
          }
4

2 回答 2

0

我认为您对使用split()and有点困惑join()。正如所写，代码不是因为存在"|"而分裂，而是分裂每个字符。那是因为您调用的数组中没有值.join()。

我认为这将满足您的需求：

    function displayLabel()
        {
            var item = document.getElementById("lstRightBox").options.innerText;
            var test = item.split("|");
            document.getElementById("label").innerHTML = test.join("\r\n<br/>");
            return true;
        }

以下是其工作原理的细分：

  • 我假设您的值与.lstRightBox分隔|。
  • 该行在变量var test = item.split("|");中创建了一个数组，数组的test每个元素都是与字符串不同的值item（其中每个值由 分隔|）。
  • 然后它后面的行将输出放入元素test.join("\r\n<br/>")的 HTML 中，其中输出是一个字符串，其中每个项目用 . 分隔。labeltest.join("\r\n<br/>")"\r\n<br/>"

请注意，我在其中添加了<br/>后面，以便它会在每个匹配项之间显示一个换行符test。

还值得注意的是，您可能可以使用以下方法完成同样的事情.replace()：

    function displayLabel()
        {
            var items = document.getElementById("lstRightBox").options.innerText;
            document.getElementById("label").innerHTML = items.replace("|", "\r\n<br/>");
            return true;
        }

编辑：查看您用于移动项目的代码，我认为您可以在此处执行类似的操作。您可以依赖已在使用的相同 jQuery 选择器，而不是执行 replace() 或 .join()：

// selected items
function display_list_items(lstBox)
  {
    $("#"+lstBox+"  option:selected").each(function(){
        document.getElementById("label").innerHTML += $(this);
    });
  }

  // all items 
function display_list_items_all(lstComplete, lstRightBox)
  {
    $("#"+lstBox+"  option").each(function(){
        document.getElementById("label").innerHTML += $(this);
    });
  }
于 2013-04-23T17:00:18.010 回答
0

我终于找到了一种让项目正确显示的方法！我所做的是对上面列出的原始 displayLabel() 函数进行了一些更改。我使用 for 循环来查看右侧列表框中的选项。下面列出了代码，供任何可能觉得有用的人使用。

            function displaylabel()
                {
                    var lstBox = document.getElementById("lstRightListBox").options.innerText;
                    var label = "";
                    for (var i = 0; i < document.getElementById("lstRightListBox").options.length; i++)
                        {
                            label += document.getElementById("lstRightListBox").options(i).text + '<br>';
                        }
                    document.getElementById("label ").innerHTML = label;
                }
于 2013-04-24T20:54:06.977 回答