jquery - 如何在选项更改时创建 div？

Question

我想通过选项 .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>

Answer 1

要执行您需要的操作，您只需在循环并创建新的 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>