Question

我正在尝试从新div的下拉列表中输出所有选定选项的HTML。但是，每次我选择一个新的复选框时，我的容器都会使用所选的值进行更新（就像它应该的那样），但它也会从下拉列表中追加每个先前选择的值。等等等等。如何仅输出复选框HTML一次？

继承我的JS代码：

let emptyArr = [];
$('.dropdown-select-container').find("option:selected").each(function(){
    emptyArr.push($(this).html());
});

for (i in emptyArr) {
  let outputResult = "<div class='arr-item'>" + emptyArr[i] + "</div>"
  $("#container").append(outputResult);
}

Answer 1

鉴于数据不完整，我们尽我们所能。将来，使用完整信息诊断您正在尝试做的事情总是更容易。

然而，这都是矫枉过正。重新阅读你的帖子，你问为什么你得到一个，然后aab，然后aababc，当你添加更多的支票或其他什么。简单的答案是因为你在div中添加了越来越多的东西，但是你永远不会删除已经存在的内容。在开始追加之前，只需在该容器div上调用empty（）即可。请参阅下文，了解我的意思。

$(".dropdown-select-container").on("change", function() {

    var emptyArr = [];
    // Go through the select, find all selected options.
  $('.dropdown-select-container').find(":selected").each(function() {
    emptyArr.push($(this).html());
  });
  // remove all current content.
  $("#container").empty();
  
  // go through the array line by line,
  //  and create a div for each.
  for (var i = 0; i < emptyArr.length; i++) {
  console.log(emptyArr);
    var outputResult = "<div class='arr-item'>" + emptyArr[i] + "</div>"
    $("#container").append(outputResult);
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

<label>Selection list</label>

<select class="dropdown-select-container" multiple>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">District Of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NV">Nevada</option>
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="ND">North Dakota</option>
  <option value="OH">Ohio</option>
  <option value="OK">Oklahoma</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="TX">Texas</option>
  <option value="UT">Utah</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WA">Washington</option>
  <option value="WV">West Virginia</option>
  <option value="WI">Wisconsin</option>
  <option value="WY">Wyoming</option>
</select>

Answer 2

因为您使用的是jQuery＆＃39; append，所以#container将始终追加（又称添加）outputResult的内容1}}而不是替换#container的内容。相反，您应该使用html函数清空#container的内容，并将内容替换为outputResult，如下所示：

$("#container").html(outputResult);

仅添加一次所有数组项

2 个答案: