Ajax query returning correct value in console log, but not showing in the view - ajax

Question

This is my html code.
<div class="form-group row add">
<label class="control-label col-sm-2" for="division_id">Division Name:</label>
<div class="col-sm-10">
<select name="district_id" id ="district_id" class="selectdistrict">
<option value="">--Select district--</option>
#foreach($atmdistrict as $cat)
<option value="{{$cat->id}}">{{$cat->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row add">
<label class="control-label col-sm-2" for="thana_id">Thana Name:</label>
<div class="col-sm-10">
<select name="thana_id" class="thananame" id ="thana_id" >
<option value="0" disabled="true" selected="true">Thana Name</option>
</select>
</div>
</div>
This is my ajax query for dependent dropdown.
$(document).ready(function(){
$(document).on('change','.selectdistrict',function(){
console.log("hmm its change");
var district_id=$(this).val();
console.log(district_id);
var div=$(this).parent();
var op=" ";
$.ajax({
type:'get',
url:'{!!URL::to('findThanaName')!!}',
data:{'id':district_id},
success:function(data){
console.log('success');
console.log(data);
//console.log(data.length);
op+='<option value="0" selected disabled>chose thana</option>';
for(var i=0;i<data.length;i++){
op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
console.log(data[i].name);
}
div.find('.thananame').html(" ");
// console.log( div.find('.name').html(" "));
div.find('.select').append(op);
//console.log( div.find('.select').append(op));
},
error:function(){
console.log('error');
}
});
});
});
The console log is showing no error, and is returning the correct data. However, the drop down menu is not showing any data. I can't figure out where I am going wrong.
screenshot of the program running

Answer 1

try to change :
div.find('.select').append(op);
by :
$("#thana_id").html(op);