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

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

已添加

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

    // 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() 。正如所写，代码不会因 "|" 的存在而 split 。而是对每个 Angular 色进行 split 。这是因为您正在调用 .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/>")进入 label 的 HTML元素，其中 test.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);
    });
  }