Does not save html select data from ajax query to session - php

Question

I'm creating a form where the users have to select their country and city from a select field, which is dynamically updated corresponding to the actual country selected. However when the form is submitted everything is getting saved successfully except the city.
I'm using jquery select2 and jquery validation plugin, I think those could cause the problem.
Here is the main code:
$('#country').select2().change(function() {
$("#city").select2('data', null);
$.ajax({
type: 'post',
url: 'search_city.php',
data: 'country=' + $(this).val(),
dataType: 'html',
success: function(response) {
$('#city').html(response);
}
});
});
and
<label>* City:</label>
<select id="city" name="property_city" required>
<option></option>
</select>
and this is search_city.php
echo '<option></option>';
while($city = mysqli_fetch_object($cities)) {
if($_SESSION['property_city'] == $city->id) {
echo '<option selected value="'.$city->id.'">'.$city->name.'</option>';
} else {
echo '<option value="'.$city->id.'">'.$city->name.'</option>';
}
}
When the form is submitted a validation php runs where I save the data to session variables. There are more inputs, not just the country and the city, and they are saved successfully except the city I mentioned.
I can't figure out what the problem is. I did't include all the code, maybe something else could cause the problem, however if someone could find it here I would be relieved.

Answer 1

You need to write,
$html = '<option value=""></option>';
while($city = mysqli_fetch_object($cities)) {
if($_SESSION['property_city'] == $city->id) {
$html .= '<option selected value="'.$city->id.'">'.$city->name.'</option>';
} else {
$html .= '<option value="'.$city->id.'">'.$city->name.'</option>';
}
}
echo $html;