CODEWITHSUNDEEP
jquery
peace_love
peace_love

Reputation: 6471

How can create divs on option change?

I want to create divs with the class name colors by option .on("change"). It works well, but anytime I change the option, more and more div's are created. But I have only two colors, so as a result anytime I change the option, I only want to see two divs: "blue" and "red". I tried to used $('.result').remove(); before appending. But then nothing is appended.

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

Upvotes: 3

Views: 54

Answers (3)

Husen
Husen

Reputation: 1587

You can remove html of the div like $('.result').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>

Upvotes: 0

Aniket Sahrawat
Aniket Sahrawat

Reputation: 12937

You are not clearing your .result and appending more elements. You can use html('') to clear the result.

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

Also, you should not use .remove() to clear html contents. .remove() removes the element completely. Click link to know about .remove().

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337666

To do what you require you can simply call empty() on the .result div before you loop through and create the new div elements. Try this:

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

Upvotes: 6

Related Questions