如何将数组附加到输入，将每个值包装在一个跨度中？答案

【问题标题】：How to append an array to an input, wrapping each value in a span?如何将数组附加到输入，将每个值包装在一个跨度中？
【发布时间】：2023-03-27 06:02:01
【问题描述】：

我有一些复选框，每次我选中/取消选中它们时，我都希望将它们的值附加到搜索框中，每个值都包含在一个跨度中。

这是我目前所得到的：

现在我只是在每次数组更改时将数组添加到输入的值：

updateInputBox = function(query) {
  var inputBox;
  inputBox = $("#searchBox")
  inputBox.val(checkboxes);
}

请看这里：https://jsfiddle.net/g7n9zpow/

我在思考如何围绕每个值获取  时遇到了麻烦。我想过迭代数组，并将值附加到输入的值，但是我必须先检查输入是否已经是空白......它会变得混乱。我认为这很容易。

编辑

原来试图将 放入输入是愚蠢的。我想要它，以便我可以像这样设置每个值的样式：

【问题讨论】：

您想将它们包装在输入字段中的 中吗？为什么？
文本输入只能包含文本。您不能在该文本的某些部分周围设置跨度。
你可以只连接跨度标签，jsfiddle.net/g7n9zpow/1
不能用逗号分隔吗？我认为您可以稍后在其上运行另一个函数，无论您要对数据做什么。
感谢 cmets 伙计们，现在我意识到我不能在输入字段中设置跨度，我会找到另一个解决方案。 @DarrenSweeney，我想要跨度，以便我可以设置每个值的样式。

标签： javascript jquery arrays input append

【解决方案1】：

您可以使用带有contenteditable 属性集的div 元素，button 元素；使用$.map()，$.filter()； css :before 为"x" 设置样式

    var checkboxes = [],
      elems = $(":checkbox"),
      inputBox = $("#searchBox");

    updateInputBox = function(query) {
      inputBox.html(query);
    }

    elems.change(function() {
      checkboxes = $.map(elems.filter(":checked"), function(el, i) {
        return checkboxes.indexOf(el.value) < 0 
               && "<button>" + el.value + "</button>"
      });
      updateInputBox(checkboxes)
      console.log(checkboxes);
    });

#searchBox {
  border: 1px solid gray;
  width: 80%;
}
button:before {
  content: "x ";
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="checkboxes">
  <label>
    <input type="checkbox" value="Tom Hanks" name="actorName">Tom Hanks</label>
  <label>
    <input type="checkbox" value="Tim Allen" name="actorName">Tim Allen</label>
  <label>
    <input type="checkbox" value="Don Rickles" name="actorName">Don Rickles</label>
  <label>
    <input type="checkbox" value="Jim Varney" name="actorName">Jim Varney</label>
  <label>
    <input type="checkbox" value="Wallace Shawn" name="actorName">Wallace Shawn</label>
  <label>
    <input type="checkbox" value="Fantasy" name="genreName">Fantasy</label>
  <label>
    <input type="checkbox" value="Comedy" name="genreName">Comedy</label>
  <label>
    <input type="checkbox" value="Children" name="genreName">Children</label>
  <label>
    <input type="checkbox" value="Animation" name="genreName">Animation</label>
  <label>
    <input type="checkbox" value="Adventure" name="genreName">Adventure</label>
  <label>
    <input type="checkbox" value="USA" name="countryName">USA</label>
</div>
<div contenteditable id="searchBox"></div>

jsfiddle https://jsfiddle.net/g7n9zpow/11/

【讨论】：

很好，但是有一个错误：如果您选中汤姆汉克斯和蒂姆艾伦，然后您取消选中蒂姆艾伦，它会删除汤姆汉克斯而不是蒂姆艾伦。这是什么原因造成的？

【解决方案2】：

您可以使用map() 函数进行如下操作。

$(':checkbox').change(function () {
    var checkboxes = $(':checkbox:checked').map(function () {
        return '<span>' + this.value + '</span>'
    }).get().join('');

    $("#searchBox").val(checkboxes);
})

UPDATED FIDDLE

【讨论】：

【解决方案3】：

只需将它们包装在  中，然后推送：

$(':checkbox').change(function() {
  var $this = $(this);
  if ($(this).is(':checked')) {
    checkboxes.push('<span>'+$this.val()+'</span>') // <-- here
    updateInputBox(checkboxes)
  } else {
    index = checkboxes.indexOf('<span>'+$this.val()+'</span>'); // <-- and here
    if (index > -1)
      checkboxes.splice(index, 1);
    updateInputBox(checkboxes)
  }
  return console.log(checkboxes);
});

Updated fiddle

【讨论】：