Неправильная загрузка списка по выбору из другого списка mvc

Имеется приложение в котором есть форма из нескольких DropDownList. Контроллер выглядит следующим образом:

public IActionResult Index()
    {
        int selectedIndex = 0;
        SelectList marks = new SelectList(db.Mark, "Id", "Mark", selectedIndex);
        ViewBag.Marks = marks;
        SelectList models = new SelectList(db.Model.Where(c => c.MarkId == selectedIndex), "Id", "Model");
        ViewBag.Models = models;
        IndexViewModel home = new IndexViewModel(){Region = db.Region.ToList()};
        return View(home);
    }
public ActionResult GetItems(int id)
    {
        return PartialView(db.Model.Where(c => c.MarkId == id).ToList());
    }

Модель:

public class MarkCar
{
    public int Id {get; set; }
    public string? Mark {get;set;}
    public ICollection<ModelCar> Models { get; set; }
}
public class ModelCar
{
    public int Id {get; set;}
    public string? Model {get; set;}
    public int MarkId {get; set;}
    public MarkCar MarkCar {get; set;}
}

Частичное представление:

@model IEnumerable<ProecktCart.Models.ModelCar>
<select id="model" name="Model">
@foreach (var item in Model)
    {
        <option value="@item.Id" selected="">@item.Model</option>
    }
</select>

Главная страница:

<div class="row second">
              <div class="input-field">
                <div class="input-select">
                  @Html.DropDownList("Mark", ViewBag.Marks as SelectList, new {id="mark" })
                </div>
              </div>
              <div class="input-field">
                <div class="input-select">
                  @Html.DropDownList("Model", ViewBag.Models as SelectList, new { id = "model" })
                </div>

<script type="text/javascript">
    $(function () {
        $('#mark').change(function()
        {
            // получаем выбранный id
            var id = $(this).val();
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetItems")/' + id,
                success: function (data) {
                     
                    // заменяем содержимое присланным частичным представлением
                    $('#model').replaceWith(data);
                }
            });
        });
    })
</script>
              </div>

Суть проблемы в том , что select обновляется а отображение не меняется.Как это можно исправить?