javascript - return Json 函数没有更新我的下拉列表

Question

我有一个包含填充下拉列表的 View ，我添加了一个按钮，以便用户可以在 jquery 模式中添加新的下拉列表值，因此当用户单击添加新的下拉列表值时，我想刷新下拉列表，但是目前没有任何更新。

这是我对下拉列表的看法

@model Communique.Models.PersonSupplierDetailsModel
@using Boxharry.Extensions;
@using Communique.Models;

@{
    List<SelectListItem> languages = ViewData["languages"] as List<SelectListItem>;

    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_LayoutApplicationModal.cshtml";

    if(Model.Languages == null)
    {
        Model.Languages = new List<LanguageModel>();
    }
}

<section class="page-content tabs-panel-content">          
    <div class="workspace-column ">
        <div class="modal-content person-supplier-details">
            <div class="sub-menu">
                <a class="create language-modal" href="#">Add a new Language</a>
            </div>
            <div class="modal-workspace-contents modal-form">
                @using (Html.BeginForm("SupplierDetails", "People"))
                {
                        @for(int i = 0; i < 3; i++)
                        {
                            var language = Model.Languages.ElementAtOrDefault(i);
                            if (language == null) { Model.Languages.Add(new LanguageModel()); }

                            @Html.HiddenFor(x => x.Languages[i].Id)
                            @Html.WrappedDropDownListFor(x => x.Languages[i].LanguageFrom, languages, new { @class = "form-item-container dropdownlist supplier-languages" }, "", "Please select...")
                            @Html.WrappedDropDownListFor(x => x.Languages[i].LanguageTo, languages, new { @class = "form-item-container dropdownlist supplier-languages" }, "", "Please select...")
                        }

                }
            </div>
        </div>
    </div>
</section>

这是调用的 Controller 函数

[HttpGet]
        public ActionResult GetLanguages()
        {
            CommuniqueWrapper communiqueWrapper = new CommuniqueWrapper();

            var languages = communiqueWrapper.GetTags("Languages", true);

            return Json(languages, JsonRequestBehavior.AllowGet);
        }

这是应该刷新下拉列表的 View

@{
    Layout = null;
}

<script>
    $.getJSON("@Url.Action("GetLanguages")", function (data) {
        debugger;
        var $languages = $('.supplier-languages');
        $languages.children().filter(function () {
            return $(this).attr('value');
        }).remove();
        $.each(data, function () {
            debugger;
            var option = $('<option />', {
                text: this.Text,
                value: this.Value
            });

            $languages.append(option);
        });
    });
    jSnap.modals.removeModal();
</script>

谁能看出为什么我的下拉列表不刷新？

Answer 1

试试这个

var select = $("#dropdownid");
select.empty();
  $.each(data, function (index, itemData) {
    select.append($('<option/>', {
      value: itemData.Value,
      text: itemData.Text
     }));
  });