return Json function is not updating my drop down lists

I have a view which has a populated dropdownlist, I have added a button so the user can add a new dropdownlist value in a jquery modal, so when the user clicks to add the new dropdownlist value I want to refresh the dropdownlist but at the moment nothing is updating.

here is my view with the dropdownlists

@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="#" rel="nofollow noreferrer noopener">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>

Here is the controller function which is called

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

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

            return Json(languages, JsonRequestBehavior.AllowGet);
        }

and here is the view which should refresh the dropdownlists

@{
    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>

Can anyone see why my dropdownlists aren’t refreshing?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try This

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0