Dependent dropdown menu using ajax not refreshing but console is showing data - php

Question

I am using a MVC structure and here is the JQuery:
<script type="text/javascript">
$('select[name="provider_id"]').change(function() {
var provider_id = $(this).val();
if (provider_id) {
$.ajax({
url: url + '/ProductsAjax/GetOutletByProvider',
type: 'POST',
dataType: 'json',
data: {
provider_id: provider_id
},
})
.done(function(data) {
$.each(data, function(index, item) {
var outlets = "<option value='" + item.id + "'>" + item.outlet_name + "</option>";
$('select[name="outlet"]').append(outlets);
console.log(item.id + ' ' + item.outlet_name);
})
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus + ': ' + errorThrown);
console.warn(jqXHR.responseText);
});
} else {
$('select[name="outlet"]').empty();
}
});
</script>
It is outputting the correct data in console but the dropdown menu itself does not show the data at all. Nothing happens.
Here are the select menus:
<div class="form-group m-form__group">
<label for="example_input_full_name">
Select Service Provider
</label>
<select class="form-control m-bootstrap-select m_selectpicker" name="provider_id">
<option value="">Select Service Provider</option>
<?php foreach($data['sproviders'] as $service_provider): ?>
<option value="<?php echo $service_provider->service_provider_id; ?>"><?php echo $service_provider->sp_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group m-form__group">
<label for="example_input_full_name">
Select Outlet
</label>
<select class="form-control m-bootstrap-select m_selectpicker" name="outlet" id="outlet">
</select>
</div>
Since the correct data is displaying in console, I can't figure out why it isn't pulling through into the second select menu.
Console data:
108 Branch One
109 Branch Two
110 Branch Three

Answer 1

<script type="text/javascript">
$('select[name="provider_id"]').change(function() {
var provider_id = $(this).val();
if (provider_id) {
$.ajax({
url: url + '/ProductsAjax/GetOutletByProvider',
type: 'POST',
dataType: 'json',
data: {
provider_id: provider_id
},
})
.done(function(data) {
var outlets="";
$.each(data, function(index, item) {
outlets += "<option value='" + item.id + "'>" + item.outlet_name + "</option>"; // concat all options
console.log(item.id + ' ' + item.outlet_name);
})
$('select[name="outlet"]').html(outlets); // add all options
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus + ': ' + errorThrown);
console.warn(jqXHR.responseText);
});
} else {
$('select[name="outlet"]').empty();
}
});
</script>