title: How to remove and replace select options using jquery?
body: <p>Need a little help here. I have a dynamic form that enables user to select his/her correct addresses. What I did is I have 2 select boxes. One is States and second is city. After the user choose his/her states the dropdown city options will be change dynamically according to the selected states. My problem is, I am appending it. That's why I have a problem changing the correct city. Because it will display the previous selected option value. It keeps on appending and appending. Any idea how can I work on this? Here's my code.</p>
  
  <pre><code>$('#state').on('change',function(){    
      var state_code = $('#state').val();    
      var city_url = '&lt;?php echo site_url("locations/displayCity/' + state_code + '"); ?&gt;';    
      $.ajax({    
          type: 'POST',
          url: city_url,
          data: '',
          dataType: 'json',
          async: false,
          success: function(i){    
              var select = $('#city');    
              for (var j = 0; j &lt; i.length; j++){                 
                  console.log(i[j].name + "--" + i[j].id);
                  $("#city").append("&lt;option value='" +i[j].name+ "'&gt;" +i[j].name+ "&lt;/option&gt;");    
              }    
          }    
      });    
  });
  </code></pre>
  
  <p>Here's the select for city:</p>
  
  <pre><code>&lt;select id="city" name="city"&gt;
      &lt;option value=""&gt;---Select City---&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>