使用jquery提交按钮后MVC更新DropDownListFor？

Question

我有一个表单有2个部分表单，一个部分表单是从文本框输入创建一个成分，并在单击提交按钮时将输入添加到数据库，第二个部分表单是将一个成分添加到列表框来自下拉列表

我可以成功创建一个新成分，但只有在页面刷新下拉列表中显示的新添加的成分

是否可以使用jquery脚本更新DropDownListFor unobtrusive？

添加成分的部分形式：

@model Recepten.Models.IngredientSelectModel

    @Html.LabelFor(model => model.Ingredients, "Add Ingredient")
    @Html.DropDownListFor(model => model.SelectedIngredient, Model.Ingredients, "Select Ingredient", new { @onchange = "$('#SelectedIngredients').append('<option>' + $(this).val() + '</option>')" })
    <br />
    @Html.LabelFor(model => model.Ingredients, "Current Ingredients")
    @Html.ListBoxFor(model => model.SelectedIngredients, new MultiSelectList(Model.SelectedIngredients))

创造成分的部分形式：

@model Recepten.Models.IngredientSelectModel

        @using (Ajax.BeginForm("CreateIngredient", "Recipe", new AjaxOptions() { UpdateTargetId = "create-ingredient", HttpMethod = "Post" }, new { @id = "createIngredient" }))
        {
        @Html.LabelFor(model => model.Ingredients, "Custom Ingredient")
        @Html.TextBoxFor(model => model.addIngredient, new { @id= "addIngredient" })
        <input type="submit" id="submit" value="Create" class="default-btn small-button light-border"/>
        }