jQuery .html() not updating?

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 jQuery('> .model', container).replaceWith(html); and select.html(html); and neither will work.

The HTML is like this...

<div class='vehicle-search'>
  <select class='make'><-- options filled when page loads --></select>
  <select class='model'></select>
  <select class='year'></select>
</div>

jQuery:

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('> .model', container);
  if (parseInt(makeId) > 0) {
   jQuery.ajax({
    url:  iKeyLess.internal.url + '/ajax/vehicle/make/getModelList.php',
    type: 'post',
    dataType: 'json',
    success: function (r) {
     if (r.length > 0) {
      select.html('');
      jQuery('> .year', container).html('');

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

      jQuery('> .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('> .model', container).html('');
   jQuery('> .year', container).html('');
  }
 });
});

Your selectors should not begin with >.
Therefore, they aren't matching anything.

Use jQuery('vehicle-container > select.model').html('...')