如何用ajax刷新mvc razor中的列表框

@Html.ListBoxFor(model => model.SelectedItems, Model.Items, new { id = "listBox" })

<select id="listBox" multiple>
    @foreach (var item in Model.Items)
    {
        <option value="@item.Value">@item.Text</option>
    }
</select>

<script>
    $(document).ready(function () {
        // 监听列表框的change事件
        $('#listBox').change(function () {
            // 获取选中的值
            var selectedValues = $(this).val();

            // 发送Ajax请求
            $.ajax({
                url: '@Url.Action("RefreshListBox", "ControllerName")', // 替换为实际的控制器和动作方法
                type: 'POST',
                data: { selectedValues: selectedValues },
                success: function (data) {
                    // 刷新列表框的选项
                    $('#listBox').html(data);
                }
            });
        });
    });
</script>

public ActionResult RefreshListBox(string[] selectedValues)
{
    // 根据选中的值进行相应的处理，例如从数据库中获取新的选项列表

    // 构造新的选项列表
    var newItems = new List<SelectListItem>
    {
        new SelectListItem { Value = "1", Text = "Option 1" },
        new SelectListItem { Value = "2", Text = "Option 2" },
        new SelectListItem { Value = "3", Text = "Option 3" }
    };

    // 将新的选项列表渲染为HTML字符串
    var htmlString = "";
    foreach (var item in newItems)
    {
        htmlString += $"<option value=\"{item.Value}\">{item.Text}</option>";
    }

    // 返回更新后的列表框选项
    return Content(htmlString);
}