只追加一次所有数组项
只追加一次所有数组项
提问于 2017-11-22 12:13:01
我试图在一个新的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);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-11-22 12:29:55
因为您正在使用jQuery的append，所以您的#container将始终将(也称为添加)添加到outputResult的内容中，而不是替换#container的内容。相反，您应该使用html函数来清空#container的内容，并将内容替换为outputResult，如下所示：
$("#container").html(outputResult);Stack Overflow用户
发布于 2017-11-22 12:28:19
考虑到不完整的数据，我们会尽力而为。在未来，诊断您试图用完整的信息做什么总是更容易。
然而，这一切都是过头了。重读你的帖子，你问为什么你会得到一个，然后是aab，然后是aab，当你添加更多的支票或者其他什么的时候。简单的答案是，因为您在div中添加了越来越多的内容，但是您从未删除已经存在的内容。在开始追加之前，只需调用容器div上的空()即可。下面看看我的意思。
$(".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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47443182
复制相关文章
相似问题
腾讯云开发者
