Loading select options via AJAX call - php

Question

Currently I have a select option where I'm running a forloop to fetch all the records from the database like so:
<?php if($cities) foreach($cities as $cit): ?>
<option value="<?php echo $cit['id']; ?>" <?php echo ($listing[0]['emirate'] == $cit['id'])?'selected="selected"':''?>><?php echo $cit['name']; ?></option>
<?php endforeach; ?>
Now this fetches around 30000 entries from my database which slows down my page everytime it is loaded in because it adds an extra 30000 lines of code. So I want a way to call this through a AJAX request that loads another view with the same forloop. To do this I tried creating a new file named ajaxcities.php and placed the following code:
<select name="emirate" class="form-control select2 selectsearch" <?php echo (isset($read) ? $read:''); ?> required>
<option value="<?php echo set_value('country'); ?>">Select City</option>
<?php if($cities) foreach($cities as $cit): ?>
<option value="<?php echo $cit['id']; ?>" <?php echo ($listing[0]['emirate'] == $cit['id'])?'selected="selected"':''?>><?php echo $cit['name']; ?></option>
<?php endforeach; ?>
</select>
Then I replaced this code where it was previously in my view class before to this:
<label class="control-labels ">City</label>
<span id="city-wrap">
<div class="invalid-feedback">Please choose a City</div>
<script>
function getcity(obj){
var dataString = new Object();
dataString.type = obj.val();
$.ajax({
type: "post",
url: "<?php echo site_url('listings/ajaxgetcity'); ?>/",
data: dataString,
success: function(result) {
$('#city-wrap').html(result);
}
});
}
</script>
And made a new controller with the following:
public function ajaxgetcity()
{
$views['cities'] = $this->listings_model->cities();
$this->load->view('crm/listings/ajaxcities',$views,false);
}
But this removed the select dropbox altogether. I want a way to load this only with an AJAX call and not everytime the page is reloaded