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

Question

我希望通过选项.on("change")创建类名为colors的div。它能够正常工作，但每次更改选项时，就会创建越来越多的div。但我只有两个colors，因此每次更改选项时，我只想看到两个div：“blue”和“red”。我尝试在附加之前使用$('.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>

- peace_love

Answer 1

为了满足您的要求，您可以在循环遍历并创建新的div元素之前，简单地调用empty()函数来清空.result 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>

- Rory McCrossan

---

刚回答完同样的问题，老板打来电话，5分钟没在电脑前，你就接手了！ :D - Praveen Kumar Purushothaman

Answer 2

你没有清空你的 .result 并追加更多元素。你可以使用 html('') 来清空结果。

$(document).ready(function() {
   $("#select").on("change", function() {
   $('.result').html('');
  $( ".colors" ).each(function() {
     var product = $(this).attr('title');
    $(".result").append("<div>" + product + "</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>

此外，您不应该使用.remove() 来清除html内容。 .remove()会完全删除该元素。点击链接了解有关.remove()的详细信息。

- Aniket Sahrawat

Answer 3

你可以通过 $('.result').html(''); 的方式删除 div 的 html 内容。

$(document).ready(function() {
  $("#select").on("change", function() {
    $('.result').html('');
    
    $(".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>

- Husen