如何在期权变更上创建div？

Question

我想colors通过选项创建具有类名的div .on("change").它运作良好,但只要我改变选项,就会div创建越来越多的选项.但我只有两个colors,所以任何时候我改变选项,我只想看到两个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

做你需要,你可以简单地称之为empty()对.resultDIV你循环之前通过并创建新的div元素.试试这个:

$(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>