La fonction de changement de Jquery semble fonctionner mais ne fait rien

J’ai 2 boutons radio avec le code JQuery qui reconstruit une liste déroulante avec seulement les options qu’ils choisissent. J’ai le code ci-dessous et il va à la méthode appropriée et la méthode pour construire la liste de sélection fonctionne correctement et une fois la méthode terminée, les éléments de la liste déroulante ne changent pas du tout. Tout semble être correct mais ça ne marche pas. Quelqu’un a-t-il une idée?

Vue

$('#singleSpacingRadio').change(function () { var url = "/Home/NumberOfPagesList?id=" + $('#singleSpacingRadio').val(); $.getJSON(url, function (data) { var items = "--Test--"; $.each(data, function (i, numberOfPages) { items += "" + numberOfPages.Text + ""; }); $("#numberOfPagesList").html(items); }); }); $('#doubleSpacingRadio').change(function () { var url = "/Home/NumberOfPagesList?id=" + $('#doubleSpacingRadio').val(); $.getJSON(url, function (data) { var items = "--Test--"; $.each(data, function (i, numberOfPages) { items += "" + numberOfPages.Text + ""; }); $("#numberOfPagesList").html(items); }); }); 
@Html.LabelFor(model => model.Spacing, "Spacing:") @Html.RadioButtonFor(model => model.Spacing, "Single", new { id = "singleSpacingRadio" }) Single @Html.RadioButtonFor(model => model.Spacing, "Double", new { id = "doubleSpacingRadio" }) Double

Manette

 public ActionResult NumberOfPagesList(ssortingng id) { var numberOfPagesList = from n in NumberOfPages.GetNumberOfPages() where n.Spacing == id select n; if (HttpContext.Request.IsAjaxRequest()) { return Json(new SelectList(numberOfPagesList.ToArray(), "numberOfPagesValue", "numberOfPagesName"), JsonRequestBehavior.AllowGet); } else { return RedirectToAction("Contact"); } } public class NumberOfPages { public ssortingng Name { get; set; } public ssortingng Value { get; set; } public ssortingng Spacing { get; set; } public static IQueryable GetNumberOfPages() { return new List { new NumberOfPages { Name = "1 Page (Approx. 550 Words)", Value = "1", Spacing = "Single" }, new NumberOfPages { Name = "1 Page (Approx. 275 Words)", Value = "1", Spacing = "Double" }, new NumberOfPages { Name = "50 Pages (Approx. 13750 Words)", Value = "50", Spacing = "Double" } }.AsQueryable(); } 

Changer le html à

 @Html.RadioButtonFor(m => m.Spacing, "Single", new { @class = "spacing", id="single" })  @Html.RadioButtonFor(m => m.Spacing, "Double", new { @class = "spacing", id="double" })  

et le script pour

 $('.spacing').click(function() { var select = $("#numberOfPagesList"); select.empty().append($('').val('').text('--Test--')); var url = '@Url.Action("NumberOfPagesList", "Home")'; $.getJSON(url, { id: $(this).val() }, function (data) { $.each(data, function (i, item) { select.append($('').val(item.Value).text(item.Name)); }); }); }); 

Notez également que vous n’avez pas besoin de retourner convertir votre collection en SelectList et que ce qui suit est requirejs

 return Json(numberOfPagesList, JsonRequestBehavior.AllowGet);