title: reload data from select tag each ajax request
body: <p>i have a form which i have 2 select tag. after choosing the data from the first select tag i run an ajax request to load the other data to the next select tag..</p>
  
  <pre><code> $('#carousel_type').on('change', function(){
              var selected = $(this).val();
              $.ajax({
                  type:'POST',
                  url:'functions/get_subcase.php',
                  data:{subcase:selected},
                  dataType:'JSON',
                  success: function(data){
  
                      for(i in data)
  
                      $('#subcarousel_type').append('&lt;option value = '+data[i].id+'&gt;'+data[i].carousel_title+'&lt;/option&gt;');
                  }
              });
          });
  </code></pre>
  
  <p>this is the code i use to display the return data from my ajax.. but the problem i encounter is that if i select another data.. ajax request will only load the next request and so on..</p>
  
  <p>what i wanted to do is when im selecting a data from the 1st select tag will it display on the next select tag and when i select again from the first select tag the data from the second select tag will reload..</p>
  
  <p>i dont have any idea what function im missing.</p>