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('');
}
});
});