title: jQuery .html() not updating?
body: <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>