Cascaded dropdown Validation not working with Data Annotated as Required - asp.net-mvc

Question

ISSUE / Error EXPLANATION :
I have a cascaded dropdownlist in which first user will select a
country and as per his selection cities are getting populated via ajax in which no city is selected initially but just a SELECT option is selected. I have populated my cities at the change event of country dropdown using ajax JSON data from the controller but it seems to me when I call #CityId.Empty() its removing all options from the city including the SELECT option which I re inserted through jquery code but that line is getting treated as an Option Item instead of OPTION SELECT due to which validation is assuming it a user selection where as in reality its a message to the user to select any given city. SO please help me out to do that validation working if no city is selected it should not allow me to submit the form.
Controller CODE :
public ActionResult PostAd(ClassifiedItem classifiedItem)
{
if (ModelState.IsValid)
{
classifiedItem.PostedDate = DateTime.Now;
classifiedItem.Obsolete = false;
classifiedItem.Status = "POSTED";
db.ClassifiedItems.Add(classifiedItem);
db.SaveChanges();
return View("ImageUploader", classifiedItem);
}
else
{
if (classifiedItem.City_Id == 0 || classifiedItem.City_Id == null)
{
ViewBag.Country_Id = new SelectList(db.Countries, "Id", "Country_Name");
ViewBag.City_Id = new SelectList(new List<City>(), "Id", "City_Name",0);
}
else
{
SetCascadedCountry(classifiedItem.City_Id);
}
Prepare_LOV_Data();
}
return View(classifiedItem);
}
View Code :
<div class="form-group">
<label class="control-label col-md-3">Country</label>
<div class="col-md-6">
#Html.DropDownList("Country_Id", null, "--Select Country--", htmlAttributes: new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">City</label>
<div class="col-md-6">
#Html.DropDownList("City_Id", null,"--Select City--", htmlAttributes: new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.City_Id, "", new { #class = "text-danger" })
</div>
</div>
My Script
$('document').ready(function () {
$('#Country_Id').on('change', function (d) {
$.ajax({
url: 'GetCities',
method: 'Get',
cache: false,
data: { CountryId: $(this).val() },
success: function (d) {
$('#City_Id').empty();
//$('#City_Id').append($('<option/>', { value: 0, text: '--Select City--' }));
$(d).each(function (index, item) {
$('#City_Id').append($('<option/>', { value: item.Id, text: item.City_Name }));
})
},
error: function (d) {
alert(d);
}
})
});
})