Jquery plugin Chosen not working on AJAX Call - php

Question

I have two drop downs. First one contains mobile networks MTN , VODACOM , TELKOM and the second is a chosen multiselect dropdown which should contain data (cell numbers) populated via AJAX based on the mobile network above. but it is not firing after an AJAX call.
<div id="network" class="form-group required">
<label class="control-label">Mobile Network</label>
<select class="form-control" id="network" name="network">
<option id="MTN" value="MTN">MTN</option>
<option id="VODACOM" value="VODACOM">VODACOM</option>
<option id="TELKOM" value="TELKOM">TELKOM</option>
</select>
</div>
And the second one contain cell numbers based on what is selected from above. and the dropdown uses the Chosen Plugin
<div id="cellNumber" class="form-group required">
<label class="control-label">Select SIMs</label>
<select multiple class="chosen-select form-control" id="cellNumber" name="cellNumber[]">
</select>
</div>
On the page i do this
<script>
$("select.chosen-select").chosen(); //Initializing the plugin
$('select#network').change(function () {
var id = $('select#network').children(':selected').attr('id');
if(id != " "){
localStorage.clear();
AJAXCallNumbersByCarrier(id); //AJAX Call
}
});
</script>
And this is the AJAX
function AJAXCallNumbersByCarrier(data) {
var url = "/number/" + encodeURI(data) + "/carrier";
var type = "GET";
jQuery.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"').attr('content')
}
});
jQuery.ajax({
url: url,
type: type,
data: {
"_token": $('meta[name="csrf-token"').attr('content')
},
beforeSend: function () { },
success: function (data) {
try {
var count = data.length;
if (count > 0) {
var id = $('#cellNumber').attr('id');
$('select#cellNumber').empty();
var numbers = "<option value='' hidden=''>[Select SIMs]</option>";
for (var index = 0; index < count; index++) {
details = data[index];
id = details['cellnumber'];
cellnumber = details['cellnumber'];
simserial = details['simserial'];
realm = details['apnname'];
numbers += '<option id="' + id + '" value="' + cellnumber + '">'+'[ '+ cellnumber + ' ] [ ' + simserial + ' ] [ ' + realm + ' ]' + '</option>';
}
$('select#cellNumber').append(numbers);
$('div#cellNumber').show();
}else{
$('div#ErrorMessage').empty();
$('div#ErrorMessage').append("No numbers available for the selected customer");
$('div#ErrorMessage').show();
$('div.alert').not('.alert-important').delay(3000).fadeOut(350);
$('select#cellNumber').empty();
$('select#cellNumber').append("<option value'' hidden=''>[No numbers available for the selected customer]</option>");
$('div#cellNumber').show();
}
} catch (err) {
alert("Error running JS code from module: AJAXCallNumbersByCarrier");
}
},
error: function (url, jqXHR, textStatus, errorThrown) {
alert("url: " + url + " error: " + jqXHR.responseText + " status: " + textStatus + " errorThrown: " + errorThrown);
},
complete: function () { }
});
}
When i remove the $("select.chosen-select").chosen(); it works fine as a normal HTML multi select dropdown. The issue is the chosen. It is not firing. Data is empty. Please help.

Answer 1

try to reinitialize the chosen in the success function like
success:function(data){
// your code here
$('select#cellNumber').append(numbers);
$("select.chosen-select").chosen();
$('div#cellNumber').show();
}
it solved once i face the same issue.
Hope this helps.

Answer 2

I used Select2 instead. works well.