ASP generate new Id's for your inputs in client side ,

So you select html would look like

<select ID="City" class="form-control basic" asp-for="City" asp-items="@(new SelectList(ViewBag.Cities,"Id","ZoneName"))" readonly="@(Model.IsView ? true : false)">
     <option value="0" selected>Select</option>
</select>

the generated id for this is : City.ClientID , so in order to access this selected , you js code should look like

...
success: function (data) {
                        
  alert(data.city);
  //debugger;
  $("#<%=City.ClientID%>").val(data.city);

},
...

note the $("#<%=City.ClientID%>") --> is new generated id would be printed in selector

you can try this

 $("#City option[value=data.city]").attr('selected', 'selected');

$('#City').val(data.city); is the correct way to set selected value for dropdownlist.

For this constructor: new SelectList(ViewBag.Cities,"Id","ZoneName")), the first parameter is the source, the second parameter is each option value in select, the third parameter is that each option displays text in html.

That is to say, Id represents the option value and ZoneName represents the option text.

When you set the value for select, you need be sure the data.city value equals to any value of Id.

Testing code:

Model:

public class Test
{
    public string City { get; set; }
}
public class City
{
    public int Id { get; set; }
    public string ZoneName { get; set; }
}

View(Index.cshtml):

@model Test
<select id="CustomerName">
    <option>custom1</option>
    <option>custom2</option>
    <option>custom3</option>
</select>
<div class="form-group col-md-4">
    <label for="inputState">City</label>
    <select id="City" class="form-control basic" asp-for="City"
            asp-items="@(new SelectList(ViewBag.Cities,"Id","ZoneName"))">
        <option value="0" selected>Select</option>
    </select>
</div>
@section Scripts
{
<script>
    $("#CustomerName").change(function () {
        var CustomerName = $("#CustomerName").val();

        $.ajax({
            url: "/Home/FetchCustomerAddress",
            data: { userId: CustomerName  },
            type: "Get",
            success: function (data) {
                alert(data.city);    
                $('#City').val(data.city);
            },
            error: function (err) {
                //console.error(err)
                //alert("Internal server error.");
            }
        })
    });
</script>
}

Controller:

public IActionResult Index()
{
    ViewBag.Cities = new List<City>()
    {
        new City(){Id=1,ZoneName="aa"},
        new City(){Id=2,ZoneName="bb"},
        new City(){Id=3,ZoneName="cc"}
    };
    return View();
}

public IActionResult FetchCustomerAddress(string userId)
{
    //do your stuff...
    return Json(new Test() { City = "2" });
}

Render view:

Ajax response data(press F12 in browser -> click Network panel -> choose FetchCustomerAddress method name -> choose Response)