jQuery .html() not updating?
<p>I'm doing a vehicle search on our site, you select the make and ajax loads the models and populates a select box.  The problem is that I can't get the select box to update with the options.  I've tried both <code>jQuery('&gt; .model', container).replaceWith(html);</code> and <code>select.html(html);</code> and neither will work.</p>

<p>The HTML is like this...</p>

<pre><code>&lt;div class='vehicle-search'&gt;
  &lt;select class='make'&gt;&lt;-- options filled when page loads --&gt;&lt;/select&gt;
  &lt;select class='model'&gt;&lt;/select&gt;
  &lt;select class='year'&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>jQuery().ready(function () {
 jQuery('.vehicle-search .make').bind('click', function (e) {
  var makeId = jQuery(e.target).val();
  var container = jQuery(e.target).parent('.vehicle-search');
  var select = jQuery('&gt; .model', container);
  if (parseInt(makeId) &gt; 0) {
   jQuery.ajax({
    url:  iKeyLess.internal.url + '/ajax/vehicle/make/getModelList.php',
    type: 'post',
    dataType: 'json',
    success: function (r) {
     if (r.length &gt; 0) {
      select.html('');
      jQuery('&gt; .year', container).html('');

      var html = '';
      for (var i = 0; i &lt; r.length; i++) {
       html += "&lt;option value='"+r[i].id+"'&gt;"+r[i].name+"&lt;/option&gt;";
      }

      jQuery('&gt; .model', container).replaceWith(html);
     } else {
      alert('We did not find any models for this make');
     }
    },
    error: function () {
     alert('Unable to process your request, ajax file not found');
     return false;
    },
    data: {
     makeId: makeId
    }
   });
  } else {
   select.html('');
   jQuery('&gt; .model', container).html('');
   jQuery('&gt; .year', container).html('');
  }
 });
});
</code></pre>
