Question

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

我已经在标签中显示了文字，但我无法让它为每个项目输入一个新行（就像它们会显示在列表框中一样）。文本会出现空格，但仍然没有在新行上拆分。我是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;
            }

ADDED

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

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

Answer 1

我认为您对split()和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字符串的值不同（其中每个值由{{1}分隔}}）。
然后，它后面的行将|的输出放入test.join("\r\n<br/>")元素的HTML中，其中label的输出是一个字符串，其中每个项目由{{1}分隔}}。

请注意，我在其中添加了test.join("\r\n<br/>")，以便在"\r\n<br/>"的每个匹配项之间显示换行符。

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

<br/>

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

test

Answer 2

我终于找到了让项目正确显示的方法！我所做的是对我上面列出的原始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;
                }

使用Javascript在标签中显示列表项

2 个答案:

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