Dynamic dependent select option using AJAX and Laravel 5.8 - ajax

Question

I am actually trying to obtain a dynamic dependent select option for city based on region and in my controller i am returning a string(using echo) but unfortunately the string is not rendering in the select option(of cities) on the browser. but i can see it by inspection or by printing on the console.
my jquery:
<script >
$(document).ready(function(){
$('.dynamic').change(function(){
if($(this).val() != '')
{
var select = $(this).attr("id");
var value = $(this).val();
var dependent = $(this).data('dependent');
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('dynamicdependent.fetch') }}",
method:"POST",
data:{select:select, value:value, _token:_token, dependent:dependent},
success:function(result)
{
$('#cityName').html(result);
console.log(result);
console.log(result);
}
})
}
});
$('#RegionName').change(function(){
$('#cityName').val('');
});
});
</script>
: my controller
class DynamicDependent extends Controller
{
public function fetch(Request $request)
{
$select = $request->get('select');
$value = $request->get('value');
$dependent = $request->get('dependent');
$data = city::where($select,$value)->get();
$output = '<option value="">Select '.ucfirst($dependent).'</option>';
foreach($data as $row)
{
$output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
}
echo $output;
}
}
:no eroor message
Here is the picture of the actual outpout :

Answer 1

I suspect that the response might not be that well formed.
Try to return a proper response instead of echoing yourself.
// other code in the controller ...
return response()->json($output);
If it doesn't help, please include the actual response you get in the browser/console.

Answer 2

thanks. actually i was using bootstrap select library and there is a class called selectpicker when i removed this class from the select tag of city it worked fine