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

Question

我想通过选项colors创建类名为.on("change")的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>

Answer 1

要执行您需要的操作，您只需在empty() div上调用.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>

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()完全删除了该元素。点击link了解.remove()。

Answer 3

您可以删除div的html，例如$（＆＃39; .result＆＃39;）。html（＆＃39;＆＃39;）;

＆＃13;

＆＃13;

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

＆＃13;

result = models.objects.filter(example=89).values_list('DataFeild','DataFeild','DataFeild','DataFeild')

＆＃13;

＆＃13;

＆＃13;