我想通过选项 .on("change")
创建类名为 colors
的 div。它运行良好,但每当我更改选项时,就会创建越来越多的 div
。但我只有两种颜色,因此每当我更改选项时,我只想看到两个 div:“蓝色”和“红色”。我尝试在附加之前使用 $('.result').remove();
。但随后就没有附加任何内容。
$(document).ready(function() {
$("#select").on("change", function() {
$(".colors").each(function() {
var color = $(this).attr('title');
$(".result").append("<div>" + color + "</div>");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
<option class="colors" title="blue">a</option>
<option class="colors" title="red">b</option>
<option title="green">c</option>
</select>
<div class="result"></div>
最佳答案
要执行您需要的操作,您只需在循环并创建新的 div 元素之前对 .result
div 调用 empty()
即可。试试这个:
$(document).ready(function() {
$("#select").on("change", function() {
$('.result').empty();
$(".colors").each(function() {
$(".result").append("<div>" + this.title + "</div>");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
<option class="colors" title="blue">a</option>
<option class="colors" title="red">b</option>
<option title="green">c</option>
</select>
<div class="result"></div>
关于jquery - 如何在选项更改时创建 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40547610/